同时运行组动画jQuery

Question

我希望首先同时执行第一个动画块，然后同时执行第二个代码块。提前致谢

$('#logo').fadeIn({queue: false, duration: 2000});
$('#logo').animate({ width: "300px" }, 2000);
$('#logo_img').animate({ width: "300px" }, 2000);

$('#logo').delay(500).animate({marginTop: "-500px", width: "200px"}, {queue: false, duration: 1000});
$("#logo_img").animte({width: "200px"},1000);

Answer 1

jQuery animate 有一个完整的回调，您可以在其中链接后续函数，例如。

$( "#logo" ).animate({
    width: "300px"
}, 2000, function() {
    // Animation complete.
});

Answer 2

实际上所有的 jquery 动画都接受回调，因此您可以同步设置前 3 个动画，然后将后 3 个嵌入回调中，如下所示：

$('#logo').fadeIn({queue: false, duration: 2000});
$('#logo').animate({ width: "300px" }, 2000);
$('#logo_img').animate({ width: "300px" }, 2000, function() {
    $('#logo').delay(500).animate({marginTop: "-500px", width: "200px"}, {queue: false, duration: 1000});
    $("#logo_img").animte({width: "200px"},1000);
});

我希望这有助于回答您的问题。

戴夫

Answer 3

感谢您的帮助，但我刚刚发现了我的错误，我的语法在第 5 行不正确；我写了 "animte" 而不是 "animate"。简单的错误，但你的回答仍然帮助我解决了所以谢谢

同时运行组动画jQuery

Simultaneously run grouped animations jQuery

javascript

jquery

animation

jquery-animate