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

如果我理解正确，您可以使用animate函数的完整回调：

$(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 2

你可以这样做：

$(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 3

您也可以使用jQuery的.promise()函数来延迟辅助操作，直到完成所有动画。此方法适用于多个动画，回调不会。

所以将你的.css调用放入promise（）。done函数，如下所示：

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

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

如何先执行动画功能然后再应用

3 个答案: