Javascript 为什么stop（）使动画重复？

对不起，如果我用这个愚蠢的问题打扰你。我是一个编程/jQuery的新手，在使用不止一个动画方法和回调函数的元素上使用stop（）时遇到问题

请参考我在这里所做的：

HTML:

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

启动动画
停止动画

停止（）使动画和回调函数重复2次，只需单击一次“停止”按钮。我做错什么了吗？

给我想要的

$(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>

$（文档）.ready（函数（）{
$（“#开始”）。单击（函数（）{
$（“div”）.animate（{高度：'300px'，不透明度：'0.8'，2000）；
$（“div”）.animate（{宽度：'300px'，不透明度：'0.6'，2000）；
$（“div”）.animate（{高度：'100px'，不透明度：'0.4'，2000）；
$（“div”）.animate（{宽度：'100px'，不透明度：'0.2'}，2000，函数（）{
警惕（“祝你一天愉快！”）；
});
});
$（“#完成”）。单击（函数（）{
$（“div”）。停止（真）；
});
});
启动动画
停止动画

我检查了您的代码并做了一些更改

1）

给出动画Div的ID

在这种情况下，必须将ID设置为动画DIV，因为会发生动画 不止一次，当您单击stop（）时，它会触发动画并等待动画完成。完成后，您会将callback指定给alert（），因此每当您按start时，它都会为click和callback设置alert

---

我修改了您的代码，使其更具建设性，并将true添加为stop参数

<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>

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“div”）.animate（{高度：'300px'，不透明度：'0.8'}，2000，函数（）{
$（“div”）.animate（{宽度：'300px'，不透明度：'0.6'}，2000，函数（）{
$（“div”）.animate（{高度：'100px'，不透明度：'0.4'}，2000，函数（）{
$（“div”）.animate（{宽度：'100px'，不透明度：'0.2'}，2000，函数（）{
警惕（“祝你一天愉快！”）；
});
});
});
});
});
$（“#完成”）。单击（函数（）{
$（“div”）.stop（真）
});
});

那么，您将第一个事件处理程序绑定到两个按钮元素。即，当您单击

#done

按钮时，两个事件处理程序都将执行。因此，问题不在于

.stop

，而在于如何绑定处理程序。这只是因为您分配了两个单击事件，每个按钮元素一个，第二个是id为#done的按钮。要更深入地了解我在stop中提到的参数，请阅读此链接下的“clearQueue”

$(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>

<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>