jquery - 使用动画缓动向上和向下滑动

Question

我需要一个平滑的幻灯片效果，我似乎无法理解我做错了什么。我试过以下

 $(document).ready(function(){
   $('.drop2').click(function(){
       var $next = $(this).parent().next('li.drop_down2');
       if($next.is(':visible')) {
           $next.animate(     {'display':'none'}, 'slow', 'easeOutBounce');
       } else {
         $next.animate(   {'display':'block'}, 'slow', 'easeOutBounce');
       }
   });
  });

  $(document).ready(function(){
   $('.drop2').click(function(){
       var $next = $(this).parent().next('li.drop_down2');
       if($next.is(':visible')) {
           $next.slideUp({
           duration: 1000, 
           easing: easeInSine, 
           complete: callback});
       } else {
           $next.slideDown();
       }
   });
  });

我做错了什么来使这种平滑效果发生吗

Answer 1

这应该让你开始，马特：

<div class="trigger"><a href="#" onclick="return false">Expand one.</a></div>
<div class="expander">Item one is now shown.</div>

<div class="trigger"><a href="#" onclick="return false">Expand two.</a></div>
<div class="expander">Item two is now shown.</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script>
jQuery(document).ready(function() {
    jQuery('.expander').hide();
    jQuery('.trigger').click(function() {
        jQuery(this).next('.expander').slideToggle();
    });
});
</script>