使用jQuery添加缓动效果

Question

I need to add an ease effect to the .dropdown div when it becomes visible with jQuery, but I'd be happy to do it with CSS as well. Any ideas? Thanks in advance :)

 $('.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 second fade in ( 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

Hope this helps.

 $('.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>