Javascript 想在jQuery中无限次地在div上重复动画吗？

我想要什么

我正在尝试使用jQuery中的

fadeIn（）/fadOut（）

函数创建动画，我完成了动画，但它只工作了一次，尽管我希望它重复多次

我尝试的

我尝试两次使用setInterval（）函数来实现这一点，其中我使用totalDur变量添加了动画总时间的持续时间，并将其传递给父级setInterval函数

这是我做的，请检查一下

$（文档）.ready（函数（）{
//这是重复的
setInterval（函数（）{
$（'.box'）。每个（函数（索引）{
//这适用于每个长方体动画
设置间隔（函数（eachshowdiv）{
每个showdiv.fadeIn（）；
}，索引*800，$（本））；
});
}, 2000);
});
.wrapper{
宽度：1000px；
保证金：0px自动；
}
.包装盒{
高度：250px；
宽度：18%；
保证金权利：2%；
浮动：左；
背景：绿色；
显示：无
}

您可以使用
.promise（）
，
.fadeOut（）
，递归


$（文档）.ready（函数（）{
函数repeatAnimation（）{
var-box=$（“.box”）.fadeOut（）；
框。每个（函数（索引）{
$（this）.delay（索引*800）.fadeIn（）；
});
box.promise（）.then（function（））{
设置超时（repeatAnimation，2000）
})
};
重复动画（）
});
.wrapper{
宽度：1000px；
保证金：0px自动；
}
.包装盒{
高度：250px；
宽度：18%；
保证金权利：2%；
浮动：左；
背景：绿色；
显示：无
}


$（文档）.ready（函数（）{
var-boxLength=$（“.box”）.length；
//完成一个周期后执行此方法。
setInterval（函数（）{
$（'.box'）。每个（函数（索引）{
var currentBox=$（此值）；
//只有在上一个框完成后，才能使用FadeIn
setTimeout（函数（）{
currentBox.fadeIn（）；
//在当前框上发生FadeIn之前要进行FadeIn的框数。
//对于1，需要像（2,3,4,5,4,3,2）这样的序列才能再次消失
//boxLength-索引*2，只包含最后一个元素一次
变量超时=2*（boxLength-索引）-2；
//在任何一侧的前一个框上执行FadeIn之前的淡出。
setTimeout（函数（）{
currentBox.fadeOut（）；
}，超时*400）；
}，指数*400）；
})
}，（2*boxLength-1*400）；
});
.wrapper{
宽度：1000px；
保证金：0px自动；
}
.包装盒{
高度：250px；
宽度：18%；
保证金权利：2%；
浮动：左；
背景：绿色；
显示：无
}

使用fadeToggle（），首先所有元素将隐藏，然后它们将显示，然后te将隐藏，依此类推…首先工作正常我想重复多次，请检查代码段谢谢。它的工作很好。但还有一件事我想从左到右再从右到左。如果你有解决办法，请告诉我。