Наведите курсор, повторяя

Question

Когда пользователь наводит курсор на div1: -

• содержимое div1 и div2 исчезает
• div1 загружает новый контент
• div2 исчезает в существующем содержимом div1

Здесь я хочу, чтобы это прекратилось.

Однако, когда загружается новое содержимое div1, событие hover снова срабатывает, и это продолжается.

как можноя делаю так, чтобы после начального события зависания событие зависания не повторялось до тех пор, пока пользователь не уберет курсор и снова не зависнет на div1?

надеюсь, это имеет смысл, ура заранее!

$('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
    });
});

Answer 1

Поскольку вы не используете второе событие hover , вместо него используйте mouseover :

$('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(){
            });
        });
    }

})