E.g. dropdown menu if yo render it and quickly mouse over the “about us” button and out like 5 times and stop menu going to open several times and then stop. I need it to just do the last one animation.
<script type="text/javascript">
$(document).ready(function(){
$("ul.topnav li a").mouseenter(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show();
});
$(".dropdown").mouseleave(function(){
$(this).stop(true, false);
$(this).parent().find("ul.subnav").slideUp('fast');
});
});
HTML:
<ul class="topnav">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">About Us</a>
<ul class="subnav dropdown">
<li><a href="#">Sub Nav Link 1</a></li>
<li><a href="#">Sub Nav Link 2</a></li>
</ul>
</li>
</ul>
</script>
Prefix your transition with
.stop(true, true), e.g.: