0

我有一个相当宽的 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' 变量来解决这个问题，但这似乎没有做任何事情。有什么建议么？

4

1 回答 1

2

你只需要stop()在调用动画函数之前使用添加它的函数，比如animate()or 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 ] )

于 2013-09-16T18:53:20.803 回答