How to order animations with jQuery?

Asked

Viewed 331 times

5

I have this code and I wanted to order the animations so that the header only begins after the .logo_1 end. I tried to use Duration but it didn’t work out very well, there is some other way for me to sort the animations?

$(document).ready(function(e) {
    $('.mini_botao').click(function(){
        $(".logo_1").animate({marginTop: '-150px'}, 1000);
        $("header").animate({marginTop: '0'}, 3000);
    });
});
jquery animation

  • You want to start one animation only after the other one finishes, that’s it?

  • 1

    Correct @bfavaretto

2 answers

6

Add a callback to the first animation, then use the second.

$(document).ready(function(e) {
    $('.mini_botao').click(function(){
        $(".logo_1").animate({marginTop: '-150px'}, 1000, function() {
            $("header").animate({marginTop: '0'}, 1000);
        });
    });
});
  • 1

    I get more or less, I still need to use a Duration thousand difference so the animations do not come together.

  • @Josimara this solution that the Cahe presented solves his problem, after performing the first animation, is called the second.

4


  • 2

    Delay will be the right alternative, I will make some more implementations and callback will not serve to min.

Browser other questions tagged jquery animation

You are not signed in. Login or sign up in order to post.