使用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

希望这有帮助。

day

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

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