Question

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 test page

Answer 1

I believe that this will do what you are looking for. Basically, what you need to do is wait until the <div> has faded in completely before you bind the hover event for the image. You can achieve this by doing the event binding in the callback for the <div> fadeIn. Additionally, since you are only doing something on the hoverIn event (and not on hoverOut), you can use .mouseenter() instead of .hover()

Here is the code:

$(function() {
    $('div img').hide();
    $('#immagine1').hide().fadeIn(5000, function() {
        $('div').mouseenter(function() {
            $(this).find('img').fadeIn('1000');
        });
    });
});

And here’s a working demo of it: http://jsfiddle.net/vYz3t/