Question

I need a smooth slide effect and i cant seem to understand what I am doing wrong. I have tried the following

 $(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();
       }
   });
  });

Is there something I am doing wrong to make this smooth effect happen

Answer 1

This should get you started, Matt:

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