如何首先進行的動畫功能，然後應用

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

您可能還可以使用jQuery的.promise()功能延遲次要操作直到所有動畫完成。此方法適用於多個動畫，該回調不會。

所以，把你的電話的CSS進入無極（）函數進行如下圖所示：動畫回調內部

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

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