Question

对不起，如果我打扰你这个愚蠢的问题。我是编程/ jQuery的新手，我在使用多个动画方法和回调函数的元素上使用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>

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

Answer 1

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>

Answer 2

我检查你的代码并做了一些改变

1）Give the ID of Animated Div

在这种情况下，您必须将ID设置为动画DIV，因为会发生动画多一次，当你点击stop（）然后它触发动画并等待完成它，完成后你将回调分配给alert（），所以当你按下start时它设置了click和alert回调的警告。

See Working DEMO

Answer 3

我修改了你的代码以使其更具建设性，并将其添加为true作为停止

的参数

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

为什么stop（）让动画重复？

3 个答案: