javascript - How to stop the repeat of the jQuery functions mouseenter() and mouseleave()? -
problem: when hover mouse on div block, ul list items displayed fadein, , when distract mouse div block, ul list items fadeing out, , when same action fast 5,6,7 or more times , when nothing mouse, functions mouseenter() , mouseleave() repeating because of fadeing duration. want example if function mouseenter() has started, other function mouseleave() not start if user has mouse distracted div block, mouseleave() function must wait until mouseenter() function has finished job, , mouseleave() function can start, , on.. how can it?
demo: https://jsfiddle.net/qcvl1xjg/
html:
<div class="block"></div> <ul class="responser"> <li>home</li> <li>product</li> <li>about</li> </ul>
css:
.block { width: 100px; height: 100px; background-color: red; }
jquery:
$(document).ready(function() { $('.responser').hide(); $(".block").mouseenter(function() { $('.responser').fadein(1250); }); $('.block').mouseleave(function() { $('.responser').fadeout(1250); }); });
you can use,.stop()
method stopping current animation.
$(".block").hover( function () { $('.responser').stop().fadein(1250); }, function () { $('.responser').stop().fadeout(1250); });
or
$(".block").mouseenter(function() { $('.responser').stop().fadein(1250); }); $('.block').mouseleave(function() { $('.responser').stop().fadeout(1250); });
Comments
Post a Comment