jquery - 使用 Jquery 在另一个元素的动画完成之前开始一个元素的动画

Question

我有一些 div，我想使用 jQuery 制作动画。但是，我想在前一个 div 的动画进行到一半时开始为下一个 div 制作动画。请帮忙如何达到想要的效果。我有以下代码，但它不起作用:

$("#box1").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });
    $("#box2").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });
    $("#box3").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });
    $("#box4").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });

Answer 1

您可以为第二个 div 添加延迟:

$('div#first_div').animate({...}, 1000);
$('div#second_div').delay(500).animate({...}, 1000);

编辑:我看到您在问题中添加了一些代码，但我不确定您希望下一个 div 何时开始。

重要的一点是，四行中的每一行都同时开始，因此您可以通过在每行的开头添加递增的延迟来获得所需的结果。

例如，在此代码中，当前一个框处于淡出中间时，框将开始淡出:

$("#box1").fadeOut(800).delay(400).fadeIn(800);
$("#box2").delay(400).fadeOut(800).delay(400).fadeIn(800);
$("#box3").delay(800).fadeOut(800).delay(400).fadeIn(800);
$("#box4").delay(1200).fadeOut(800).delay(400).fadeIn(800);

(另请注意，在简单动画中，您可以使用 fadeIn/fadeOut 而不是 animate 方法。)