Question

我想使用jQuery动画制作一些div。但是，当前一个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方法。）

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

1 个答案: