CODEWITHSUNDEEP
jquery
kevinkt
kevinkt

Reputation: 745

One animation after another in jquery

I'm trying to do one animation after another. So until the first animation completes, then the 2nd one works. Right now, only the first animation works. 

<script>

$( document ).ready(function() {

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


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

Upvotes: 1

Views: 80

Answers (2)

epascarello
epascarello

Reputation: 207501

The signature for animate is .animate( properties \[, duration \] \[, easing \] \[, complete \] ) so call it when the animation is complete.

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

Upvotes: 2

haim770
haim770

Reputation: 49095

You can have the animation return a Promise that will resolve once it's completed:

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

See Documentation

Upvotes: 0

Related Questions