javascript - 如何在Jquery中的toggleClass函数中添加动画

Question

我正在制作一个 div，它将在单击按钮时显示并在再次单击时隐藏。我正在使用 jquery 的 toggleClass 函数。问题是当 div 打开和关闭时我需要动画。我已经尝试过 transition:1s，在所有相关类(class)中，甚至在 body 上，但都是徒劳的。这是 fiddle :http://jsfiddle.net/9dq2p7dw/105/

这是我的 jquery 的代码:

$(document).ready(function(){
$(".view").click(function(){

$(".view-more").toggleClass("hide show", 500);

});

});

Answer 1

您可以使用 .fadeToggle

$(document).ready(function(){
$(".view").click(function(){

$(".view-more").fadeToggle( "hide show", "linear" );

});

});

.hide{
  display:none;
}
.show{
  display:block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide" >

<div class="col-md-6">
 <h1>
 asasasas
 </h1>
</div>

<div class="col-md-6">

 <h1>
 sasasas
 </h1>

</div>

</div>