5

Tenho este código e queria ordenar as animações, para que a do header só comece depois que a do .logo_1 terminar. Tentei usar duration mas não deu muito certo, tem alguma outra forma de eu ordenar as animações?

$(document).ready(function(e) {
    $('.mini_botao').click(function(){
        $(".logo_1").animate({marginTop: '-150px'}, 1000);
        $("header").animate({marginTop: '0'}, 3000);
    });
});
2
  • Você quer começar uma animação só depois que a outra terminar, é isso?
    – bfavaretto
    9/04/2014 às 3:09
  • 1
    Correto @bfavaretto
    – Josimara
    9/04/2014 às 3:16

2 Respostas 2

6

Adicione um callback na primeira animação, pra daí então utilizar a segunda.

$(document).ready(function(e) {
    $('.mini_botao').click(function(){
        $(".logo_1").animate({marginTop: '-150px'}, 1000, function() {
            $("header").animate({marginTop: '0'}, 1000);
        });
    });
});
2
  • 1
    Fico mais ou menos, ainda estou precisando usar um duration com diferença de mil pra as animações não saírem juntas.
    – Josimara
    9/04/2014 às 3:20
  • @Josimara esta solução que o Cahe apresentou resolve seu problema, após realizar a primeira animação, é chamada a segunda.
    – Paulo
    9/04/2014 às 4:23
4

Tente um delay antes

$("header").delay(2500).animate({marginTop: '0'}, 1000);

Referências:

1
  • 2
    Delay vai ser a alternativa certa, vou fazer mais algumas implementações e o callback não vai servir pra min.
    – Josimara
    9/04/2014 às 3:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .