Question

当我悬停另一个div时，我将这个脚本设置为fadeout和fadein（fadeTo）div，它几乎完美无缺，但是当我快速地进出div时，脚本会一直循环直到它到达我徘徊的时间。< / p>

是否可以停止（超时？）fadeOut / FadeIn效果直到循环完成？所以它会停止重复进行快速悬停，但是当循环结束时脚本会再次运行

jsFiddle：（快速将鼠标悬停进出红色部分几次，你会注意到文字一直在继续）
http://jsfiddle.net/v69Jk/

$(function () {
$('.one').hover(function () {
    $('.show').fadeTo(600, 0);
},

function () {
    $('.show').fadeTo(600, 1);
});
});

Answer 1

解决方案1 ：取消上一个动画：

$(function () {
    $('.one').hover(function () {
        $('.show').stop().fadeTo(600, 0);
    },

    function () {
        $('.show').stop().fadeTo(600, 1);
    });
});

Demo

解决方案2 ：当动画尚未完成时停止事件（如您所愿，但由于hover功能，这可能无法正常工作）

$(function () {
    $('.one').hover(function () {
        if (!$('.show').is(':animated')) {
            $('.show').fadeTo(600, 0);
        }
    },

    function () {
        if (!$('.show').is(':animated')) {
            $('.show').fadeTo(600, 1);
        }
    });
});

停止执行javascript直到完整循环

1 个答案:

Demo

Demo