修复jQuery动画以将图像滑到屏幕上

我这里有一个动画，在屏幕上滑动3个图像，保持30秒，然后将它们滑出屏幕

我目前的问题是，只有在图像1完全完成动画中的滑动后，图像2才会在屏幕上滑动，而图像3也在等待图像2完全滑动。我想让这个动画看起来更“流畅”

我所有的图像长度都是400px。一旦图像1越过

200px

线（屏幕上显示50%），我如何开始将图像2滑动到视图中，而不必等待图像1在屏幕上显示100%。然后对图像3也执行同样的操作，一旦图像2向左移动200px，就开始滑入

下面是一个简单的图片，可能有助于更好地说明我想在这里做什么：

$（文档）.ready（函数（）{
var slideOutTime=1000；//滑到屏幕上所需的时间
var slidentime=1000；//滑出屏幕所需的时间
var slideInAfterTime=30000；//在屏幕上保持位置30秒，然后滑出屏幕
var repeatSlidingTime=90000；//在这段时间后重复动画
功能幻灯片图像（img）{
动画（{left:'0px'}，滑动时间，函数（）{
var nxt=img.next（）；
如果（nxt.长度>0）{
滑动图像（nxt）；
}否则{
setTimeout（函数（）{startSliding（）；}，repeatSlidingTime）；
}
setTimeout（函数（）{slideBack（img）；}，slideInAfterTime）；
});
}
功能滑回（img）{
动画（{左：'-400px'}，滑动时间）；
}
函数startSliding（）{
幻灯片图像（$（'.slide:first'）；
}
开始滑动（）；
});
.包装纸{
位置：相对位置；
溢出：隐藏；
宽度：500px；
高度：500px；
}
.幻灯片{
左：-400px；
位置：绝对位置；
宽度：400px；
高度：75px；
}
.幻灯片：第n个子（2）{top:60px；}
.幻灯片：第n个子（3）{top:120px；}

删除document ready上的slideOutTime变量定义，并将启动滑动功能的代码更改为：

function startSliding(){
    var slides = $('.slide').length;
    var slideOutTime = 500;
    for (i=1;i <= slides; i++) {
        slideImage($('.slide:nth-child('+i+')'), slideOutTime);
      slideOutTime = slideOutTime + 300;
    }

    }

函数开始滑动（）{
变量幻灯片=$（'.slide'）。长度；
var滑动时间=500；
对于@DenisKumbaradzi在其回答中提到的（i=1；i），在当前图像在视图中占50%之后，您无法在中开始为下一个图像设置动画，因为您正在作为当前图像动画的回调函数进行下一个图像动画，这意味着它仅在第一个动画完成后才开始动画


首先：使用jQuery动画：

您可以使用jQuery函数延迟下一张幻灯片动画，具体取决于jQuery函数的
index
值，如下所示：

*。请注意，我已减少了
slideinaftime
和
slideinaftime
的数量，以获得更快的动画演示效果，以及更改函数代码



$（文档）.ready（函数（）{
var slideOutTime=1000；//滑到屏幕上所需的时间
var slidentime=1000；//滑出屏幕所需的时间
var slideInAfterTime=5000；//在屏幕上保持位置30秒，然后滑出屏幕
var repeatSlidingTime=15000；//在这段时间后重复动画
var delay=400；//当前动画和下一个动画之间的延迟量
var slides=$（'.wrapper.slide'）；
动画图像（）；
设置间隔（动画图像、重复滑动时间）；
函数animateImages（）{
幻灯片。每个（功能（索引）{
var del=指数*延迟；
slidemagein（$（本），del）；
});
}
函数slidemagein（img、del）{
img.delay（del）.animate（{left:'0px'}，slideInTime，function（））{
slideImageBack（img）；
});
}
函数slideImageBack（img）{
img.delay（slideInAfterTime）.animate（{left:'-400px'}，slideInTime）；
}
})；
.wrapper{位置：相对；溢出：隐藏；宽度：500px；高度：500px；}
.幻灯片{左：-400px；位置：绝对；宽度：400px；高度：75px；}
.幻灯片：第n个子（2）{top:60px；}
.幻灯片：第n个子（3）{top:120px；}
您可以在动画之间插入延迟，而不必等待上一个动画完成，而不用在屏幕上的上一个图像达到50%时尝试将图像移动到视图中

请看一下下面我的注释性工作示例，看看它是否适合您。它还可以处理您想要的任意多个图像


var slideOutTime=600，//滑到屏幕上所需的时间
slideInTime=600，//滑出屏幕所需的时间
animationsDelay=slideOutTime/2，//在动画之间插入延迟
slideInAfterTime=3000，//在屏幕上保持位置30秒，然后滑出屏幕
repeatSlidingTime=9000；//在这段时间后重复动画
功能幻灯片图像（img）{
img.每个（功能（索引）{
var$this=$（this）；
美元这个
//基于每个图像的索引递增地延迟动画
.delay（动画延迟*索引）
.制作动画({
左：0
}，滑动时间，函数（）{
美元这个
//根据要设置动画的元素数量延迟反向动画
.延迟（（img.length-1）*动画延迟+幻灯片时间间隔）
.制作动画({
左：'-400px'
}，滑动时间，函数（）{
如果（！（$this.next（）.length））{
//在最后一个元素反向动画结束后，我们重新开始
setTimeout（函数（）{
开始滑动（）；
}，重复滑动时间）；
}
})