我这里有一个动画，将 3 张图片滑入屏幕，将它们保持 30 秒，然后将它们滑出屏幕。
我目前的问题是，Image 2 只有在 Image 1 完全完成其滑入动画后才会在屏幕上滑动，而 Image 3 等待 Image 2 完全滑入也是如此。我想尝试制作这个动画看起来更“流畅”。
我所有的图片都是 400px 长度。一旦图像 1 越过 200px 线(屏幕上的 50%)，我如何开始将图像 2 滑入 View ，而不必等待图像 1 达到 100%在屏幕上。然后对图像 3 也做同样的事情，一旦图像 2 向左移动 200px，它就开始滑动。
这是一张简单的图片，可能有助于更好地说明我想在这里做什么:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var slideOutTime=1000; // Time it takes to slide onto the screen
var slideInTime=1000; // Time it takes to slide off screen
var slideInAfterTime=30000; // Hold position on screen for 30 seconds then slide off screen
var repeatSlidingTime=90000; // Repeat animation after this amount of time
function slideImage(img){
img.animate({left:'0px'},slideOutTime,function(){
var nxt=img.next();
if(nxt.length>0){
slideImage(nxt);
}else{
setTimeout(function(){startSliding();},repeatSlidingTime);
}
setTimeout(function(){slideBack(img);},slideInAfterTime);
});
}
function slideBack(img){
img.animate({left:'-400px'},slideInTime);
}
function startSliding(){
slideImage($('.slide:first'));
}
startSliding();
});
</script>
<html>
<head>
<style>
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 500px;
}
.slide {
left:-400px;
position: absolute;
width: 400px;
height: 75px;
}
.slide:nth-child(2) {top:60px;}
.slide:nth-child(3) {top:120px;}
</style>
</head>
<body>
<div class="wrapper">
<img class="slide" src="http://i.imgur.com/4JqfxNO.png" />
<img class="slide" src="http://i.imgur.com/ehdAPjk.png" />
<img class="slide" src="http://i.imgur.com/yQ51oro.png" />
</div>
</body>
</html>基本上只是尝试在前一个图像在屏幕上达到 50% 时开始将图像移动到 View 中，而不是等待它在屏幕上达到 100% 然后开始其动画。
最佳答案
删除 document ready 上的 slideOutTime 变量定义，并将 startSliding 函数的代码更改为:
function startSliding(){
var slides = $('.slide').length;
var slideOutTime = 500;
for (i=1;i <= slides; i++) {
slideImage($('.slide:nth-child('+i+')'), slideOutTime);
slideOutTime = slideOutTime + 300;
}
}
您当前的代码不起作用的原因是因为您正在为回调函数中的下一个图像设置动画，这意味着第一个动画必须在执行回调之前完成
关于jquery - 修复 jQuery 动画以将图像滑动到屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39103566/