[jQuery] How do I stop jQuery from queuing animation?
How do I stop jQuery from queuing animation? Currently, when I mouse-
over something with a hover multiple times, then move the mouse off-
screen, it will run the function for every time I moused-over.
I basically want it to only execute once, no matter how many times I
mouse-over.
In case you need it, I am using the following:
$(document).ready(function(){
$('#mainNavigation li.two').hover(
function(){
$('#twoSubNavigation').animate({ opacity: 'show', height: 'show' });
},//over
function(){
$('#twoSubNavigation').animate({ opacity:1.0 },
1500).animate({ opacity: 'hide', height: 'hide' });
}); //out
});
With the following HTML;
<ul id="mainNavigation">
<li class="one">This</li>
<li class="two">This</li>
<li class="three">This</li>
<li class="four">This</li>
</ul>
<ul id="twoSubNavigation">
<li class="five">This</li>
<li class="six">This</li>
<li class="seven">This</li>
<li class="eight">This</li>
</ul>