Question

我正在通过标题从右到左制作单个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); });

在连续的JQuery循环中交换<div> </div>

1 个答案: