想在jQuery中无限次重复div的动画吗？

我想要的是

我正在尝试使用fadeIn()/fadOut()函数创建动画 ，我完成了动画，但它只工作了一次，虽然我希望它重复多次

我尝试了什么

我尝试使用setInterval（）函数两次执行此操作，其中我使用totalDur变量添加了动画总时间的持续时间，并将其传递给父级setInterval函数

我在这做了什么，请检查一下

 $(document).ready(function() { //this is for repeat again setInterval(function() { $('.box').each(function(index) { //this is for each box animation setInterval(function(eachshowdiv) { eachshowdiv.fadeIn(); }, index * 800, $(this)); }); }, 2000); }); 

 .wrapper { width: 1000px; margin: 0px auto; } .wrapper .box { height: 250px; width: 18%; margin-right: 2%; float: left; background: green; display: none } 

Answer 1

你可以使用.promise() .fadeOut() ，递归

 $(document).ready(function() { function repeatAnimation() { var box = $(".box").fadeOut(); box.each(function(index) { $(this).delay(index * 800).fadeIn(); }); box.promise().then(function() { setTimeout(repeatAnimation, 2000) }) }; repeatAnimation() }); 

 .wrapper { width: 1000px; margin: 0px auto; } .wrapper .box { height: 250px; width: 18%; margin-right: 2%; float: left; background: green; display: none } 

Answer 2

 $(document).ready(function() { var boxLength = $(".box").length; // Execute this Method once a Cycle is Complete. setInterval(function() { $('.box').each(function(index) { var currentBox = $(this); //FadeIn only after the prior box is FadeIn Complete setTimeout(function() { currentBox.fadeIn(); // number of boxed to be FadeIn before the fadeIn happens on the currentBox. //for 1 it takes sequence like (2,3,4,5,4,3,2) to be fadeIn again //boxLength - index * 2 and include the last element only Once var timeOut = 2 * (boxLength - index) - 2; //FadeOut just before FadeIn is executed on the prior box on either side. setTimeout(function() { currentBox.fadeOut(); }, timeOut * 400); }, index * 400); }) }, (2 * boxLength - 1) * 400); }); 

 .wrapper { width: 1000px; margin: 0px auto; } .wrapper .box { height: 250px; width: 18%; margin-right: 2%; float: left; background: green; display: none }