停止动画循环

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

您应该使用clearInterval()。

setInterval()回报intervalID，独特的间隔ID可以传递给clearInterval（）

var interval = setInterval(blink,1000); 

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

Answer 2

试试这个。

var timer = setInterval(blink,1000); 

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