Hi all! I'm pretty a beginner with jQuery!
I need to have some divs to fadeIn on page loads, and i can do it. I need to have them showing with different delay and times, and i can do it. Every div has an image that fadeIn when you hover the relative div, and i can do it.
The problem is that the animation of the image on hover, start still if the fadeIn of the div is not ended.
I want that if the user hover the div that is still going with fadeIn nothing happens. If you hover a div that is totally show then the image starts the fadeIn.
Here is my HTML
<div id="immagine1">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>
<div id="immagine2">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>
Here is my jQuery
$(window).load(function () {
$('#immagine1').hide();
$('#immagine1').stop().fadeIn(1000);
$('#immagine2').hide();
$('#immagine2').stop().delay(2500).fadeIn(2500);
$('div').hover(
function(){ $(this).find('img').fadeIn(1000);
});
});
And the img css
img{
display:none;
}
How can i "disable" the hover effect till the end of the fadeIn on page load?
thanks!
This is the link of a test page http://tinyurl.com/32thnx7