-1

我编写了代码来翻转然后增加图像的宽度和大小：

 $(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()在这里耽搁？

4

3 回答 3

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)"
    });
});
于 2013-05-07T10:57:48.240 回答
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)");
});
于 2013-05-07T10:55:33.127 回答
0

您还可以使用 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
});
于 2013-05-07T11:04:39.903 回答