slideup and slide down with animate easing

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

Please use the code tag so we understand what it is you are posting. Also tell us what browser you are testing this on. IE is stupidly slow at javascript. — Iznogood, Jul 13 '10 at 03:11
Is the problem that it isn't smooth, or that it doesn't work at all? — Mark Eirich, Jul 13 '10 at 03:23
@Iznogood: My question was for Matt. Sorry that wasn't clear. I agree, his code is hard to read. My complaint is that he describes no symptoms. — Mark Eirich, Jul 13 '10 at 03:35
@Mark oups I really tought he was posting that question sorry! — Iznogood, Jul 13 '10 at 03:53

score 1 · Accepted Answer · answered Jul 13 '10 at 03:40

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>

slideup and slide down with animate easing

1 Answers1