爲什麼stop（）會使動畫重複？

對不起，如果我打擾你這個愚蠢的問題。我是一個編程/ jQuery新手，我有一個問題，使用多個動畫方法和回調函數的元素使用stop（）。爲什麼stop（）會使動畫重複？

請參考我在這裏所做的：http://cdpn.io/sBbJw

$(document).ready(function(){ 
    $("button").click(function(){ 
    $("div").animate({height:'300px',opacity:'0.8'}, 2000); 
    $("div").animate({width:'300px',opacity:'0.6'}, 2000); 
    $("div").animate({height:'100px',opacity:'0.4'},2000); 
    $("div").animate({width:'100px',opacity:'0.2'},2000, function() { 
     alert("Have a nice day !"); 
    }); 
    }); 
$("#done").click(function() { 
    $("div").stop(); 
    }); 
});

HTML：

<button>Start Animation</button> 
<button id="done">Stop Animation</button> 
<br/><br/> 
<div></div>

停止（）使得動畫和回調函數重複2次，當你只需點擊「停止」按鈕一次。我做錯了什麼？

來源

2014-02-15 user3285658

嘛，你要綁定的第一個事件處理程序** **兩個按鈕元素。即當你點擊'＃done'按鈕時，兩個事件處理程序都會被執行。所以，問題不是'.stop'，這是你如何綁定處理程序。 –

這只是因爲您分配了2個點擊事件，每個按鈕元素一個，第二個點擊ID爲#done的按鈕。 – sunpietro

http://jsfiddle.net/QVt6L/1/

$("button").click(function(){ means on click of every button

給ID喜歡

$(document).ready(function(){ 
    $("#Start").click(function(){ 
    $("div").animate({height:'300px',opacity:'0.8'}, 2000); 
    $("div").animate({width:'300px',opacity:'0.6'}, 2000); 
    $("div").animate({height:'100px',opacity:'0.4'},2000); 
    $("div").animate({width:'100px',opacity:'0.2'},2000, function() { 
     alert("Have a nice day !"); 
    }); 
    }); 
$("#done").click(function() { 
    $("div").stop(true); 
    }); 
}); 

<button id="Start">Start Animation</button> 
<button id="done">Stop Animation</button> 
<br/><br/> 
<div style="background-color:red;"></div>

來源

2014-02-15 20:05:33

我檢查你的代碼，並可以稍作改動

1）Give the ID of Animated Div

在這種情況下，你必須設置由於動畫發生，動畫DIV的ID多一次，當你點擊停止（）然後它觸發動畫並等待完成它，完成後，你分配回調alert（），所以當你按下開始它設置警報點擊以及回調。

See Working DEMO

來源

2014-02-15 20:20:48

我修改您的代碼以更加建設性的，並加入真正的參數去制止

<SCRIPT Language="Javascript"> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("div").animate({height:'300px',opacity:'0.8'}, 2000, function(){ 
    $("div").animate({width:'300px',opacity:'0.6'}, 2000, function(){ 
     $("div").animate({height:'100px',opacity:'0.4'},2000, function(){ 
      $("div").animate({width:'100px',opacity:'0.2'},2000, function() { 
       alert("Have a nice day !"); 
      }); 
     }); 
    }); 
    }); 
}); 

$("#done").click(function() { 
    $("div").stop(true) 
}); 
}); 
</SCRIPT>

來源

2014-02-15 20:40:04

瞭解更多關於參數，我在裏面停止閱讀關於「clearQueue」這個鏈接http://api.jquery.com/stop/ –

爲什麼stop（）會使動畫重複？

回答

相關問題