使用Jquery在另一个元素的动画完成之前启动一个元素的动画

我有几个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 });

---

您可以向第二个div添加延迟：

$（'div#first_div'）。动画（{…}，1000）；
$（'div#second _div'）。延迟（500）。动画（{…}，1000）；

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

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

在这个代码中，例如，当前一个框在淡出中间时，框将开始淡出：

$（“#box1”）.fadeOut（800）、delay（400）、fadeIn（800）；
$（“#box2”）。延迟（400）。淡出（800）。延迟（400）。淡出（800）；
$（“#box3”）。延迟（800）。淡出（800）。延迟（400）。淡出（800）；
$（“#box4”）。延迟（1200）。淡出（800）。延迟（400）。淡出（800）；

（还要注意，在简单动画中，可以使用fadeIn/fadeOut而不是animate方法。）