Effect of "hover" only after the fadeIn on page load ends

Effect of "hover" only after the fadeIn on page load ends

Hi everyone,

i'm a beginner with jQuery and i need help.

I need to have a series of divs fading in with different times and delay on page load.

Each div has an image that is on "display:none". When you go "hover" a div, his relative image fadeIn and stay there.

I've done that but the problem is that if you hover the div before it ends the "fadeIn" effect, his relative image will start to show up to. I want that the user can start the fadeIn effect of the image, only after the div has ended his effect.

This is my HTML test

<div id="immagine1">
<img src="images/image.png" alt="logo_key_css" width="169" height="53"/>
</div>
<div id="immagine2">
<img src="images/image.png" alt="logo_key_css" width="169" height="53"/>
</div>

This is the jquery code

$(window).load(function () {

$('#immagine1').hide();
$('#immagine1').fadeIn(1000);
$('#immagine2').hide();
$('#immagine2').delay(2500).fadeIn(2500);
$('div').hover(
        function(){ $(this).find('img').fadeIn(1000);
    });
   
     });

How can i "deactivate" the hover function till the ends of the fadeIn?

Thanks for your reply!