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上多次，同时动画它会保存所有这些动作，并且即使用户没有与它交互也会继续为它设置动画。就像它排队所有鼠标悬停事件一样。我尝试使用'busy'变量修复它，但这似乎没有做任何事情。有什么建议吗？

Answer 1

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

$('#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()`

描述：停止匹配元素上当前正在运行的动画。

.stop( [clearQueue ] [, jumpToEnd ] )

阻止div动画在将来被触发

1 个答案:

`.stop()`