Question

我只是在玩jQuery animate()。我尝试制作各种滚动背景（fiddle here）。但对于我的生活，我无法想象一个平稳的过渡。代码发布在这里 -

HTML

<div class='bg r hide'></div>
<div class='bg g hide'></div>
<div class='bg y hide'></div>
<div class='bg b hide'></div>

JavaScript

var backgroundTimeout = 1700;

function animateMotion(){
    $('.bg').each(function(i, item) {
        var self = $(this);
        setTimeout(function() {
            self.css('opacity', '0.5').removeClass('hide')
                .animate({opacity: 1, marginLeft: '+=6'}, backgroundTimeout / 3)
                .animate({
                    marginLeft: '+=30',
                    opacity: 0,
                    queue: false,
                }, backgroundTimeout + 400, 'linear', function() {
                    self.css('marginLeft', 0);
                    self.css('opacity', 1);
                    self.addClass('hide');
                })
                if (self.index() === $('.bg').length - 1) {
                    setTimeout(animateMotion, backgroundTimeout);
                }
        }, backgroundTimeout * i + 1)
    });
}

我想要的是什么 - 第一个div移出 - 渐渐消失 - 在淡出的中途 - 下一个div消失并再次开始循环。我出错的任何想法？

Answer 1

不确定这是否是你的目标，但看看：

(function loop(idx) {
  var
    $elements = $('#wrapper div'),
    idx = idx % $elements.length;

  $elements.eq(idx).css({
    opacity: 0,
    left: 0
  }).removeClass('hide').show().animate({
    opacity: 1,
    left: 30
  }, {
    duration: 1000,
    easing: 'linear',
    complete: function () {
      $(this).animate({
        opacity: 0,
        left: 60
      }, {
        duration: 1000,
        easing: 'linear',
        complete: function () {
          $(this).addClass('hide');
        }
      });

      loop(idx + 1);
    }
  });
}(0));

使用：

<div id="wrapper">
  <div class='bg r hide'></div>
  <div class='bg g hide'></div>
  <div class='bg y hide'></div>
  <div class='bg b hide'></div>
</div>

演示：http://jsfiddle.net/hbh7z/1/

jQuery动画 - 无限运动

1 个答案: