停止動畫循環

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); 
});