创建“表示”和“隐藏”的效果，当一个div具有显示没有或不

Question

HTML：<div class="display-none">

CSS：.display-none { display: none; }

JS：removeClass('display-none')和addClass('display-none')

是否有可能创建一个“淡入”，当div.display，没有失去“淡出”效果/获取显示none类？

用CSS特效工作时，像悬停我可以使这个唯一的工作：

.random-btn {
    background-color: red;
    transition-timing-function: ease;
    transition-delay: 1s; 
    transition-duration: 0.5s;
}

.random-btn:hover {
    background-color: blue;
}

Answer 1

你肯定可以在jQuery的使用.fadeToggle（），而不是仅仅toggleClass。

但是：四联zxsw POI

您还可以阅读更多的对这里的影响jQuery的文档：https://codepen.io/anon/pen/daWMjp

HTML

http://api.jquery.com/category/effects/

CSS

<div class="this-div">
  <p>Text in the Div</p>
</div>

<div>
  <button class="toggle-btn">Toggle Hide/Show</button>
</div>

jQuery的

.display-none{
  display:none;
}

Answer 2

转变不会在显示属性的工作。显示无/块是二进制状态 - 它要么是有或没有。但是你可以让DIV始终

$('.toggle-btn').click(function(){
  $('.this-div').fadeToggle('display-none'); 
});

然后动画display: block。

看看opacity: 0全实例