js 函数加载中的时间延迟

Question

在下面的提及函数开始工作之前似乎有一个时间延迟。我无法确定为什么会这样。谁能指导我？？

图像最初确实显示，但没有淡入或淡出效果，但是一旦所有图像完成第一个循环，动画就可以工作了。

.JS：

$(function fadeAnimation() {
$(".imageClass img:gt(0)").hide();
setInterval(function fadeAnimation() {
$(".imageClass :first-child")
.fadeOut(3000)
.next("img")
.fadeIn(3000)
.end()
.appendTo(".imageClass");
}, 5500);
});

.HTML：

<div class="slidesDiv" id="cust">
<img class="imageClass" src="images/Folder1/1.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/2.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/3.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/4.jpg?" alt="" />
<img class="imageClass" src="images/Folder1/5.jpg?" alt="" />
</div>

Answer 1

你的代码中有几个问题。

1. .imageClass<img>...您必须使用容器的类，即.slidesDiv。
2. 你必须使用动画的回调...现在，.fadeIn()和.fadeOut都在同一时刻执行。
3. 你的时机不对...动画需要 6 秒，但您已将间隔设置为 5,5 秒。

有关详细信息，请参阅代码中的注释。

$(function fadeAnimation() {
// Hide all image
$(".slidesDiv img").hide();
// Fade the first in right away.
$(".slidesDiv :first-child")
.fadeIn(3000);
// Start the interval to loo through all image
// The interval will execute for the first time in 6 seconds from now.
setInterval(function fadeAnimation() {

// Fade the first out.
$(".slidesDiv :first-child")
.fadeOut(3000, function(){ // This is a "callback" when the fade out is complete

// Fade In the next image
$(this).next("img")
.fadeIn(3000);

// append the faded out image to the end of the container.
$(this).appendTo(".slidesDiv");
});
}, 6000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidesDiv" id="cust">
<img class="imageClass" src="https://via.placeholder.com/200x200?text=1" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=2" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=3" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=4" alt="" />
<img class="imageClass" src="https://via.placeholder.com/200x200?text=5" alt="" />
</div>