Как выполнить функцию анимации первого, а затем применить

Question

Я написал код, чтобы перевернуть, а затем увеличить ширину и размер изображения:

$(obj).animate({"left": "-=40px","opacity": "0.65"},"slow"); 
$(obj).animate({"height":"600px","width":"320px"},70); 

alert('1'); 
//$(obj).css("-webkit-backface-visibility","hidden"); 

$(obj).css("-webkit-transform-style","preserve-3d"); 
$(obj).css("-webkit-transition","all 1.0s linear"); 
$(obj).css("transform-style","preserve-3d"); 
$(obj).css("transition","all 1.0s linear"); 

$(obj).css("-webkit-transform","rotateY(180deg)"); 
$(obj).css("transform","rotateY(180deg)"); 
alert('2'); 

Во-первых, я хочу, чтобы изменить размер, а затем выполнить флип код анимации. Здесь сначала выполняется css(), а затем изображение изменяется. Как мне отложить css()?

Answer 1

Вы можете сделать:

$(obj).animate({"left": "-=40px", "opacity": "0.65"}, "slow"); 
$(obj).animate({"height":"600px", "width":"320px"}, 70, function() { 
    //Called after animation is complete 
    $(this).css({ 
     "-webkit-transform-style": "preserve-3d", 
     "-webkit-transition": "all 1.0s linear", 
     "transform-style": "preserve-3d", 
     "transition": "all 1.0s linear", 
     "-webkit-transform": "rotateY(180deg)", 
     "transform": "rotateY(180deg)" 
    }); 
}); 

Answer 2

Если я правильно понимаю, вы можете использовать полный обратный вызов из функции одушевленного:

$(obj).animate({"left": "-=40px","opacity": "0.65"},"slow"); 
$(obj).animate({"height":"600px","width":"320px"},70, "", function() { 

    //$(obj).css("-webkit-backface-visibility","hidden"); 
    $(obj).css("-webkit-transform-style","preserve-3d"); 
    $(obj).css("-webkit-transition","all 1.0s linear"); 
    $(obj).css("transform-style","preserve-3d"); 
    $(obj).css("transition","all 1.0s linear"); 

    $(obj).css("-webkit-transform","rotateY(180deg)"); 
    $(obj).css("transform","rotateY(180deg)"); 
}); 

Answer 3

Вы также можете быть в состоянии использовать .promise() функцию JQuery для задержки дополнительных действий до тех пор, пока все анимации не будут завершены. Этот метод работает для нескольких анимаций, которые обратные вызовы не будут.

Так поместите ваш .css вызовы в обещании() сделано функции, как показано ниже:.

$(obj).animate({"left": "-=40px","opacity": "0.65"},"slow"); 
$(obj).animate({"height":"600px","width":"320px"},70); 

$(obj).promise().done(function() { 
    // css stuff here 
});