Question

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

div1和div2的内容fadeout
div1加载一些新内容
div2淡入div1s现有内容

这是我希望停止的地方。

但是，当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

由于您未使用悬停的第二个事件，请改为使用鼠标悬停：

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

})

悬停淡出，重复

1 个答案: