Start an animation when the other one is finished/completed in jquery

问题

This is not working for me:

$(".button").click(function(){ 
    $("#start").animate({
        "opacity": ".3"
    }, "slow", function(){
        $("#start").animate({"height": "0"}, "fast");
    });
});

I want a div to animate and when it's done, animate again.

Doesn't matter what I search on Google... on all the blogs and forums it says that this should be the only way to do it.

回答1:

Looks like we'll need to see your html. Works fine for me:

http://jsfiddle.net/LTHtb/

<div class="button">start</div>

<div id="start"></div>

<script>
$(".button").click(function(){ 
$("#start").animate({
"opacity": ".3"
}, "slow", function(){
$("#start").animate({"height": "0"}, "fast");
    });
});
</script>

CSS:

 #start{
 height:200px;
  width:200px;
  margin-top:20px; 
  background-color:#e1e1e1;
}

.button{
   padding:10px;
   background-color:#369; 
   cursor: pointer;
   width:200px;
}

回答2:

For an endless animation loop, you could use this:

function animate() { 
  $("#start").animate({opacity: .3}, "slow", 
    function () {
      $("#start").animate({height: 0}, "fast", animate);
    }
  );
}

$(".button").click(animate);

回答3:

Probably you are looking for slideUp() function. Anyway your code works fine:

Code: http://jsfiddle.net/nbnV6/1/

来源：https://stackoverflow.com/questions/8259361/start-an-animation-when-the-other-one-is-finished-completed-in-jquery