jQuery, hover active only when the fade in on page load ends

Question

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

Answer 1

Look, i doesn't understand your real problem, but try this:

$(window).load(function () {
    $('#immagine1, #immagine2').hide();
    $('#immagine1').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
    );
    $('#immagine2').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
   );
});

Or take a look on jQuery hover docs

Answer 2

I'm not sure what you're trying to achieve, but maybe you can get your desired effect by using .queue() to explicitly place the hover animation at the end of the queue:

$('div').hover(function() {
  $(this).queue(function() {
    $(this).find('img').fadeIn(1000);
  });
});​

The fade-in effect will begin after pending animations in the default queue ("fx") are complete. Here's a fiddle demonstrating the concept; perhaps it will point you in the right direction.

Answer 3

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/