Question

我已经编写了一个小功能，每隔5秒移动一次按钮，就像这样：

HTML：

<a href="#" class="button">Text</a>

JS：

var interval;
function buttonShake(){ 
    var times = 5;
    var speed = 300;
    var distance = '15px';

    for(var i = 0; i < times; i++) {
        twitterButton.animate({
            left: '-='+distance
        }, speed).animate({
            left: '+='+distance
        }, speed);
    }
}
interval = setInterval(buttonShake, 4000);

单击按钮时，它会从页面右侧滑出一个隐藏的框。我试图做的是防止按钮在点击后弹跳。

所以我尝试使用以下

button.on('click', function(e){

    // do the slideout animation
    // add "open" class to the box

    if(box.hasClass('open')){
        clearInterval(interval);
    }

});

button和box元素已正确定义，open类会在滑出后附加到框中，但清除间隔似乎不是工作。它仍然每隔5秒不断调用buttonShake()函数。

这是一个JSFiddle，其中包含实时预览的完整代码：

http://jsfiddle.net/30tsype8/3/

我在这里做错了吗？

Answer 1

我注意到，如果你离开它一段时间，动画似乎进入超速状态，而不是运行大约3秒并暂停一秒再开始，它只是不断反弹。我认为jQuery与它的调用重叠并且混淆并陷入循环。

当您想要在展开面板时停止弹出按钮时，我会在使用finish()展开面板后立即完成动画：

twitterWrapper.animate({
    right: right
}, function() {
    twitterButton.finish();
});

Updated fiddle

单击Javascript clearInterval

1 个答案: