Jquery hover fadeIn/fadeOut problem
Question
http://www.izrada-weba.com/orso On mouseover on link "NENATKRIVENA TERASA..." submenu and image fade in together. Submenu is faded using some downloaded script and image above is fading using my code:
$(document).ready(function () {
$("#slika1").hide();
$("#test,#submenu2").hover(
function () {
$("#slika1").fadeIn();
},
function () {
$("#slika1").fadeOut();
}
);
});
When mouse is over link than image fades in, and when mouse is moved to submenu image fades out and than fades in again... I know why is that so but I don't know how to make it not fadeout when moving mouse directly from link to submenu. Are there any solutions for this?
Thanks, Ile
Solution
The function stop() will stop any currently running animations on the specified element.
Try modifying your mouseover function:
$("#slika1").stop().fadeIn();
Edit:
There seems to be a problem with the submenu not fading in all the way (see ile's comment). This seems to me like its a jQuery bug, but I'm not sure. Maybe someone can chime in and explain why this is happening.
To get around this try using fadeTo(); it seems to produce the desired result:
$(document).ready(function () {
$("#slika1").fadeTo(0,0);
$("#test,#submenu2").hover(
function () {
$("#slika1").stop(true).fadeTo("normal",1);
},
function () {
$("#slika1").fadeTo("normal",0);
}
);
});
OTHER TIPS
The problem with fadeIn()
not working when the fadeOut()
is interrupted is because fadeIn()
only works if the element is hidden. Whether you call it a bug or a feature. To remedy this you can do the following.
$("#mydiv").stop().hide().fadeIn(450);