Question

如何在点击jQuery时停止动画循环？以下代码在输入字段上生成闪烁效果并正常工作：

function blink() {
    $('#client_name').animate({"border-color": "#00DB00"}, 400);
    $('#client_name').animate({"border-color": "#ccc"}, 400);
}

setInterval(blink, 1000);

我尝试stop()但它只停止当前正在运行的动画，而不是整个循环：

$('#client_surname').click(function() {
    $('#client_name').stop();
});

Answer 1

试试这个。

var timer = setInterval(blink,1000);

$('#client_surname').click(function() {
    clearInterval(timer);
});

Answer 2

您应该使用clearInterval()。

setInterval()返回intervalID，您可以传递给clearInterval（）的唯一区间ID

var interval = setInterval(blink,1000);

$('#client_surname').click(function() {
    clearInterval(interval);
});

停止动画循环

2 个答案: