我有一组 div:
<div class="alert-container">
<div class="alert">alert 1 text</div>
<div class="alert">alert 2 text</div>
<div class="alert">alert 3 text</div>
</div>
我想将它们一一制作动画,如下所示:
- 警报 1 SlideInDown > 等待 3 秒 > 警报 1 SlideOutDown >
- 警报 2 SlideInDown > 等待 3 秒 > 警报 2 SlideOutDown >
- 警报 3 SlideInDown > 等待 3 秒 > 警报 3 SlideOutDown >
- 重复[1]
我的JS当前状态是这样的:
$('.alert-container .alert').each(function(index) {
$(this).addClass('animated slideInDown').show().one(animationEnd, function(){
$(this).removeClass('animated slideInDown').addClass('animated slideOutDown').one(animationEnd, function(){
$(this).removeClass('animated slideOutDown').hide();
});
});
});
我正在使用 animate.css,从添加的类可以看出,当前的结果是同时对所有三个 .alert
div 进行动画处理,这正是我所期望的。现在我只需要修改它来逐一制作动画,并无限重复。
即使在查看了其他 SO 帖子之后,我仍然在努力思考在哪里使用 setInterval
和 $.each
才能达到我想要的结果,以及我是否应该使用基于 index
等的 initialDelay
变量。
请帮忙。非常感谢。
最佳答案
您可以尝试以下代码:
$(document).ready(function(){
var slideArray = $(".alert-container > .alert");
var slideTime = 3000; //3 seconds
var currentSlideIndex = 0;
setInterval(function(){
if(currentSlideIndex < slideArray.length){
animateSlide(currentSlideIndex);
currentSlideIndex++;
}
else
{
currentSlideIndex = 0;
animateSlide(currentSlideIndex);
}
},slideTime);
function animateSlide(slideIndex){
var slideObject = slideArray[slideIndex]; //get the slide object to animate
$(slideObject).addClass('animated slideInDown').show().one(animationEnd, function(){
$(slideObject).removeClass('animated slideInDown').addClass('animated slideOutDown').one(animationEnd, function(){
$(slideObject).removeClass('animated slideOutDown').hide();
});
});
}
})
基本上你不能在$.each
循环中直接使用setInterval
。因此,为了避免这种方法,您可以通过其索引
一次为一张幻灯片设置动画。
注意 - 我无法测试上面的代码。但我想它应该有效。
关于javascript - 使用 $.each 和 setInterval 循环播放连续动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40253145/