jquery中一个接一个的动画

Question

我试图做一个接一个的动画。因此，直到第一个动画完成，然后第二个工作。目前，只有第一部动画才起作用。

<script> 

$(document).ready(function() { 

$('.white-area-comments').animate({ 
scrollTop: $('.white-area-comments').prop('scrollHeight') 
}, 800); 


$('#your-rank').fadeIn('slow'); 
}); 
</script> 

Answer 1

Animate的签名是.animate(properties \[, duration \] \[, easing \] \[, complete \])所以称之为动画完成时。

$('.white-area-comments').animate({ 
    scrollTop: $('.white-area-comments').prop('scrollHeight') 
}, 800, function() { 
    $('#your-rank').fadeIn('slow'); 
}); 

Answer 2

你可以有动画返回一个Promise一旦它完成，将解决：

$('.white-area-comments') 
    .animate({ ... }, 800) 
    .promise() 
    .done(function() { 
     $('#your-rank').fadeIn('slow'); 
    }); 

见Documentation