悬停淡入，重复

Question

当用户将鼠标悬停在 div1 上时： -

• div1 和 div2 的内容淡出
• div1 加载一些新内容
• div2 在 div1 现有内容中淡出

这是我希望停止的地方。

然而，当 div1 的新内容加载时，悬停事件再次触发，并且这种情况继续下去。

我怎样才能做到在初始悬停事件之后，悬停事件不会再次发生，直到用户删除光标并再次悬停在 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(){
            });
        });
    }

})