jquery - 交换在一个连续的 JQuery 循环中

Question

我正在努力让一个 div 从右到左通过标题进行动画处理。一旦 div 离开屏幕并完成动画，我想循环动画，但将 div 换成另一个包含新图像的 div。代码如下，但无法正常运行。任何帮助将不胜感激。

    $(document).ready(function() {
       var clouds = $('#bg_header .cloud');
       var lng = clouds.length;
    $('.cloud').eq(0).animate({
        right: '+=1400'
        }, 50000, 'linear', anim(1));
          function anim(i) {
          if (i >= lng) {
          i = 0;
     }
    $('.cloud').eq(i).animate({
        right: '+=1400'
        }, 50000, 'linear', anim(i+1));
  }
});

HTML

<div id="bg_header">
<div id="clouds" class="cloud" style="right:-400px;"><img border="0" alt="animated clouds" src="/images/clouds.png" /></div>
<div id="clouds2" class="cloud" style="right:-400px;"><img border="0" alt="animated clouds" src="/images/clouds2.png" /></div>

CSS

#bg_header{
min-width:990px;
padding-left:105px;
padding-right:105px;
right:0;
left:0;
height:330px;
position:fixed;
background:url("/images/bg_header.png") repeat-x top center;
z-index:1000;
clear:both;
margin-left:auto;
margin-right:auto;
}


#clouds{
position:absolute;
z-index:500;
right:0px;
top:10px;
}


#clouds2{
position:absolute;
z-index:500;
right:0px;
top:10px;
}

Answer 1

您没有准确说出问题所在（只是它没有“正常运行”），但一个明显的问题是您的回调引用会animate()立即执行，而不是作为函数引用传递。

改变

$('.cloud').eq(0).animate({
    right: '+=1400'
}, 50000, 'linear', anim(1));

至

$('.cloud').eq(0).animate({
    right: '+=1400'
}, 50000, 'linear', function() { anim(1); });