jquery - 阻止 div 动画在未来被触发

Question

我有一个非常宽的 div，它超过了页面的宽度。我希望有一个功能，人们可以将鼠标悬停在 div 上，它会为边距设置动画，以便它移动并且您可以看到其余内容。我已经有一个可用的脚本:

var busy = 0;
$('#busy').html(busy);
    $("#hover").hover(
    //on mouseover
    function() {
        if(!busy){
        busy=1;
            $('#busy').html(busy);
            $('#tooltip').fadeOut('slow');
            $('#slide').animate({
                marginLeft: '-3415px' //substracts 184px
            }, 15100
            );
            $('#busy').html(busy);
        }

    },
    //on mouseout
    function() {
            $('#slide').animate({
                marginLeft: '-683px' //substracts 184px
            }, 11100, busy =0
            );
            $('#tooltip').fadeIn('slow');
            $('#busy').html(busy);
    }
  );

但是它出了问题。动画本身工作得很好，但是如果你在 div 上移动鼠标多次，它会保存所有这些移动，并且即使用户没有与它交互，它也会在以后继续动画。就像它正在排队所有鼠标悬停事件。我试图用“忙碌”变量来解决这个问题，但这似乎没有任何作用。有什么建议吗？

Answer 1

您只需要在调用animate() 或fadeIn() 等动画函数之前使用stop() 函数添加它。

$('#busy').html(busy);
    $("#hover").hover(
    //on mouseover
    function() {
        if(!busy){
        busy=1;
            $('#busy').html(busy);
            $('#tooltip').stop(true).fadeOut('slow');
            //            ^^^^^^^^^^ Here
            $('#slide').stop(true).animate({
            //          ^^^^^^^^^^ Here
                marginLeft: '-3415px' //substracts 184px
            }, 15100
            );
            $('#busy').html(busy);
        }

    },
    //on mouseout
    function() {
            $('#slide').stop(true).animate({
            //          ^^^^^^^^^^ Here
                marginLeft: '-683px' //substracts 184px
            }, 11100, busy =0
            );
            $('#tooltip').stop(true).fadeIn('slow');
            //            ^^^^^^^^^^ Here
            $('#busy').html(busy);
    }
  );

.stop()

Description: Stop the currently-running animation on the matched elements.

.stop( [clearQueue ] [, jumpToEnd ] )