Web サイトのヘッダーで複数の画像を水平方向にスクロールする関数を作成しました。したがって、ヘッダー内に次のようなコードがあります。
<div class='images'> <!-- this div is 150% wide with overflow hidden -->
<img src=... /><img src=... /><img src=... /><img src=... />
</div>
次のように動作するはずです：
- アニメーションを使用して最初の画像を取得し、視野の外で左にスクロールします (その
margin-leftプロパティを使用) - 最初の画像を最後に移動します (実際には、画像を削除し、最後に新しい画像を作成します)。
- プロセス全体を再起動します。
次の関数を作成しました。
function scroll()
{
var o = jQuery('.images').children().first();
var w = o.css('width');
var s = o.attr('src');
jQuery('.images:first-child').animate({'margin-left': "-"+w}, {'duration': 1000, 'complete': function(){
jQuery('.images').children().first().remove();
jQuery('.images').append("<img src='"+s+"' />");
scroll();}});
}
現在、次のように動作します: 最初の画像は適切にアニメーション化され、その後のすべての画像はスクロールされません (アニメーションは機能しません)。ただし、1000ミリ秒の時間の後、最初の画像が最後に移動されます。実際、画像は変化していますが、アニメーションは機能していません。
scroll()最後の関数の呼び出しが早すぎると思いますが、適切にチェーンするにはどうすればよいですか?