jquery clear animation queue

I have the code below,开发者_开发问答 which works fine it can be viewed for an example. Once the user hovers over one menu, you can then not hover over it again unless the page is refreshed. I have a feeling its something to do with my queue and I have tried .stop() but doesnt seem to work.

<script type="text/javascript">
    $(document).ready(function() 
     {


        $('li').hover(function() 
        { 

                   $(this).children("p.subtext").stop().slideDown();            




            }, 

                function() 
                { 

                 $(this).children("p.subtext").stop().animate({height:'0px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 

        }); 





    }); 
    </script> 

Cheers

In this case, use .stop(true, true)

This first parameter in stop instructs it to clear the queue, see here for more info on .stop()

Edit, for your queue issue:

$('li').hover(function() { 
  $(this).children("p.subtext").slideDown();            
}, function() { 
  $(this).children("p.subtext")
         .animate({height:'toggle'},{duration:600, easing: 'easeOutBounce'});
});