title: jQuery, hover active only when the fade in on page load ends
body: <p>I'm pretty a beginner with jQuery!</p>
  
  <p>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.</p>
  
  <p>The problem is that the animation of the image on hover, start still if the fadeIn of the div is not ended.</p>
  
  <p>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.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div id="immagine1"&gt;
  &lt;img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/&gt;
  &lt;/div&gt;
  &lt;div id="immagine2"&gt;
  &lt;img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my jQuery</p>
  
  <pre><code>$(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);
      });
  
       });
  </code></pre>
  
  <p>And the img css</p>
  
  <pre><code>img{
  display:none;
  }
  </code></pre>
  
  <p>How can i "disable" the hover effect till the end of the fadeIn on page load?</p>
  
  <p>Thanks!</p>
  
  <p><a href="http://www.marcodeliso.it/jquery/test.html" rel="nofollow">This is the test page</a></p>