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