0

ヘッダーを介して右から左に単一の 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;
}
4

1 に答える 1

0

問題が何であるかを正確に述べているわけではありませんが (「正しく機能していない」というだけです)、明らかな問題の 1 つは、コールバック参照がanimate()関数参照として渡されるのではなく、すぐに実行されることです。

変化する

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

に

$('.cloud').eq(0).animate({
    right: '+=1400'
}, 50000, 'linear', function() { anim(1); });
于 2012-07-11T15:21:52.180 に答える