使用jQuery添加缓动效果

Question

当使用jQuery显示时，我需要为.dropdown div添加一个缓动效果，但我也很乐意用CSS做到这一点。 有任何想法吗？ 提前致谢 ：）

 $('.btn').bind('click', function (){ $(this).parent().next('.dropdown').toggleClass('open'); }); 

 .top, .bottom { background: #333; height: 50px; } .dropdown { height: 50px; position: absolute; color: black; visibility: hidden; } .open { position: relative; visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="top"> <button class="btn">Show content</button> </div> <div class="dropdown"> <p>Hidden content</p> </div> <div class="bottom"> </div> 

https://jsfiddle.net/319zd1sg/1/

Answer 1

1秒淡入（ https://jsfiddle.net/nh2fj27g/1/ ）。

$('.btn').bind('click', function (){
var $dropdown = $(this).parent().next('.dropdown');
$dropdown.hasClass('open') ? $dropdown.toggleClass('open').animate({opacity: 0},1000) : $dropdown.css({opacity: 0}).toggleClass('open').animate({opacity: 1},1000);

}）;

Answer 2

希望这可以帮助。

 $('.btn').bind('click', function() { $('#drop').slideDown('slow'); }); 

 .top, .bottom { background: #333; height: 50px; } .dropdown { display: block; color: black; width: 100%; } .drop { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top"> <button class="btn">Show content</button> </div> <div id="drop" class="drop"> <div class="dropdown"> <p>Hidden content</p> </div> </div> <div class="bottom"> </div>