Question

我有一个动画在这里，将3张图像滑入屏幕，在那里保持30秒，然后将它们从屏幕上滑回。

我目前的问题是，一旦图像1完全完成滑动动画，图像2将仅在屏幕上滑动，而图像3等待图像2完全滑入则同样的事情。我想尝试制作这个动画看起来更“流畅”。

我的所有图片的长度都是 400px 。一旦图像1越过 200px 行（屏幕上50％）而不是必须等待图像1在屏幕上100％，我该如何开始将图像2滑入视图。然后对图像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％而不是等待它在屏幕上100％然后开始动画时开始将图像移动到视图中。

Answer 1

删除文档就绪的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;
    }

    }

以下是updated fiddle

您当前代码无法工作的原因是因为您在回调函数中设置了下一个图像的动画，这意味着第一个动画必须在回调执行之前完成

Answer 2

正如@DenisKumbaradzi在他的回答中提到的，你可以不在视图中当前图像为50％之后开始动画下一个图像，因为你正在做下一个图像动画作为回调当前图像动画的功能，这意味着它只在第一个动画完成后才开始动画。

第一：使用jQuery动画：

您可以使用jQuery http://regexr.com/函数来延迟下一个幻灯片动画，具体取决于jQuery delay()函数的index值，如下所示：

*。 _{请注意，为了演示目的，我减少了slideInAfterTime和slideInAfterTime的数量以获得更快的动画，以及更改功能代码}

each()

＆＃13;

$(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 = 5000; // Hold position on screen for 30 seconds then slide off screen
  var repeatSlidingTime = 15000; // Repeat animation after this amount of time
  var delay = 400; // amount of delay between current and next animation
  var slides = $('.wrapper .slide');

  animateImages();
  setInterval(animateImages, repeatSlidingTime);
  
  function animateImages(){
  	slides.each(function(index) {
   		var del = index * delay;
    	slideImageIn($(this), del);
  	});
  }

  function slideImageIn(img, del) {
    img.delay(del).animate({left: '0px'}, slideInTime, function() {
      slideImageBack(img);
    });
  }

  function slideImageBack(img) {
    img.delay(slideInAfterTime).animate({ left: '-400px'}, slideInTime);
  }

});

＆＃13;

.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; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <img class="slide" src="//i.imgur.com/4JqfxNO.png" />
  <img class="slide" src="//i.imgur.com/ehdAPjk.png" />
  <img class="slide" src="//i.imgur.com/yQ51oro.png" />
</div>

＆＃13;

第二：使用GSAP动画：

另一种方法是使用jsFiddle 1库来制作比jQuery动画更好，更流畅的动画，并使这个 50% 在我们使用的幻灯片动画之间等待GSAP GreenSock Animation Platform (GSAP)功能，如下所示：

*。 _{请注意，GSAP动画函数使用的时间以秒为单位，而不是以毫秒为单位，这就是slideOutTime，slideInTime，slideInAfterTime和delay的值以秒为单位的原因，而{ {1}}仍然以毫秒为单位，因为我们并未在GSAP中使用它，而是使用repeatSlidingTime函数。}

staggerTo()

＆＃13;

setTimeout()

＆＃13;

$(document).ready(function() {

  var slideOutTime = 1; // Time it takes to slide onto the screen
  var slideInTime = 1; // Time it takes to slide off screen
  var slideInAfterTime = 5; // Hold position on screen for 30 seconds then slide off screen
  var repeatSlidingTime = 15000; // Repeat animation after this amount of time
  var delay = 0.4; 
  var slides = $('.wrapper .slide');
  
  animateImages();

  function animateImages(){
  	TweenMax.staggerTo(slides, slideInTime, {
  		left: 0
  	}, delay);
  	TweenMax.staggerTo(slides, slideOutTime,{
  		left: '-400px',
    	delay: slideInAfterTime
  	}, delay, function(){
    	setTimeout(animateImages, repeatSlidingTime);
    });   
  } 
});

＆＃13;

.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; }

＆＃13;

修改：如果图片看起来像是在视图中上一张图片的 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <div class="wrapper"> <img class="slide" src="//i.imgur.com/4JqfxNO.png" /> <img class="slide" src="//i.imgur.com/ehdAPjk.png" /> <img class="slide" src="//i.imgur.com/yQ51oro.png" /> </div> 之后滑入，那是因为在GSAP动画中＃39; s＆＃34;缓和＆＃34;默认情况下，如果您不想放宽，可以将50%属性添加到ease:Linear.easeNone行。现在如果检查此jsFiddle 2没有缓和，您会看到每个图片完全滑入前50％的图像在视图中

Answer 3

一旦前一幅图像在屏幕上达到50％，您就可以开始将图像移动到视图中，而不是在动画之间插入延迟，而不是等待上一个动画完成。

请查看我下面的注释工作示例，看看它是否适合您。它也适用于您想要的尽可能多的图像。

＆＃13;

var slideOutTime = 600, // Time it takes to slide onto the screen
  slideInTime = 600, // Time it takes to slide off screen
  animationsDelay = slideOutTime / 2, // Delay we insert between animations
  slideInAfterTime = 3000, // Hold position on screen for 30 seconds then slide off screen
  repeatSlidingTime = 9000; // Repeat animation after this amount of time


function slideImage(img) {

  img.each(function(index) {
    var $this = $(this);

    $this
    // Incrementally delay animations based on each image's index
      .delay(animationsDelay * index)
      .animate({
        left: 0
      }, slideOutTime, function() {
        $this
        // Delay the reverse animation based on how many elements to animate we have
          .delay((img.length - 1) * animationsDelay + slideInAfterTime)
          .animate({
            left: '-400px'
          }, slideInTime, function() {
            if (!($this.next().length)) {
              // After last element reverse animation has ended, we start all over again
              setTimeout(function() {
                startSliding();
              }, repeatSlidingTime);
            }
          });
      });
  });
}

function startSliding() {
  slideImage($('.slide'));
}

startSliding();

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

＆＃13;

PS：我也尝试使用CSS keyframe animation代替JavaScript。

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

3 个答案: