停止执行javascript直到完成循环

stop executing javascript till full cycle

本文关键字：循环 执行 javascript      更新时间：2023-09-26

我让这个脚本淡出和淡出(fadeTo)一个div当我悬停另一个div，它几乎工作完美，但当我快速悬停在和离开div脚本不断循环，直到它达到我悬停它的时间。

是否有可能停止(超时?)的fadeOut/FadeIn效果，直到循环完成?因此，它停止重复，快速悬停进出但是当循环结束时，脚本又开始工作

jsFiddle:(快速悬停在红色部分几次，你会注意到文本一直在移动)
http://jsfiddle.net/v69Jk/

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

解决方案1:取消之前的动画:

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

演示

解决方案2:当动画尚未完成时停止事件(如您所愿，但由于hover函数可能无法正常工作)

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

相关文章：