Question

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

Answer 1

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'});
});