1

我只是在玩jQuery animate()。我尝试制作各种无限滚动背景（此处为小提琴）。但是对于我的生活，我无法找到一个平稳的过渡。此处发布的代码 -

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 淡入并再次开始循环。有什么想法我哪里出错了吗？

4

1 回答 1

3

不确定这是否是您的目标，但请看一下：

(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/

于 2012-07-31T10:11:18.247 回答