http://jsfiddle.net/borayeris/sb9Ju/4/
Here is my script. How can I stop fading out if mouse is back on menu?
Add a comment
|
2 Answers
Try adding a call to stop() on the fadeIn:
$(function(){
var piFade;
$('#menu > li').hover(
function(){
$('#menu > li:hover > div').stop(true,true).fadeIn('slow');
},
function(){
$('#menu > li > div').fadeOut('slow');
}
);
});
And here is a version with the delay included. I'm not a huge fan but it's not too bad with the call to stop in there.
3 Comments
borayeris
First of all thank you. I read
stop before sending this question here. But could not understand how to use it. I even try that stupid way. jsfiddle.net/borayeris/Em2Kd/1 Can you teach me how stop behaves in your example?
Abe Miessler
It just stops the current animation. The idea is when you
mouseIn it will stop the mouseOut animation if it is taking place. The two parameters are for "clearQueue" and "jumpToEnd". The most important one for you is the clearQueue, which will stop animations from lining up and getting executed one after the other. If you didn't have that and you moused over/out five times it would do the animation 5 times.borayeris
But here I don't understand why we use
stop in fadeIn. My brain says I must use it in fadeOut. I know I am wrong but why? What's the logic of it?You set too long a delay. It still runs the original hover function. You remove it, it waits 2.5 second, then you back on it and it still removes menu from the first time you've hovered. I really don't see a reason to use delay there.
1 Comment
borayeris
Because I want menu to stay 2-3 seconds even mouse is out.