Hover fadeIn, repeating

When a user hovers over div1: -

• div1 and div2's contents fadeout
• div1 loads some new content
• div2 fades in div1s existing content

This is where I want this to stop.

However, when the new contents of div1 load, the hover event triggers again, and this continues.

how can i make it so after the initial hover event, the hover event wont occur again until the user has removed the cursor and ho开发者_如何学JAVAvered again on div1?

hope this makes sense, cheers in advance!

$('document').ready(function () {

    //For each small block
    $('#div1').hover(function () {

        var thisWish = $(this).html();
        var nextWish = $('#wishy1').html();

        //Fade the small block out bring in a new wish
        $(this).fadeOut(1200, function () {
            $(this).html(nextWish).fadeIn(1200, function () {

            });
        });

        //Fade the large block and and bring in the small blocks wish
        $('#div2').fadeOut(1200, function () {
            $('#div2').html(thisWish).fadeIn(1200, function () {

            });
        });
    }, 
    function () {
        // hover out
    });
});

Since you're not using the second event of the hover, use mouseover instead:

$('document').ready(function(){
    //For each small block
    $('#div1').mouseover(function(){
        var thisWish = $(this).html();
        var nextWish = $('#wishy1').html();
        //Fade the small block out bring in a new wish
        $(this).fadeOut(1200, function(){
            $(this).html(nextWish).fadeIn(1200, function(){
            });
        });
        //Fade the large block and and bring in the small blocks wish
        $('#div2').fadeOut(1200, function(){
            $('#div2').html(thisWish).fadeIn(1200, function(){
            });
        });
    }

})