2

jQuery と画像のフェードについて質問があります。たくさんの画像があり、ページをロードするときに、それぞれを順番に完全な不透明度にフェードしたいと思います。私のhtmlコードは以下の通りです：

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title</h2>
   <p>Caption</p></div>
</div>

<div class='mod'>
   <img src='image-src' alt='' />
   <div class='mod-text'>
   <h2>Title 2</h2>
   <p>Caption 2</p></div>
</div>

各画像には、対応する独自のタイトルとキャプションがあり、上下に表示されます。最初の画像を最初にフェードインさせ、その後に続く各画像をフェードインさせたいと思います。誰にもアイデアがありますか？私はjQueryの非常に基本的な理解を持っています。ありがとう

4

3 に答える 3

4

アニメーションをキューに入れ、前のアニメーションが終了したときにそれぞれを開始する必要があります。

<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />

var animations = new Array();
// queue all
$("img").each(function() {
    animations.push($(this));
});

// start animating
doAnimation(animations.shift());

function doAnimation(image) {
    image.fadeIn("slow", function() {
        // wait until animation is done and recurse if there are more animations
        if(animations.length > 0) doAnimation(animations.shift());
    });
}
于 2010-01-10T01:47:30.687 に答える
2

これはおそらく自分で実装する必要があるものではありません。jQuery Cycle Pluginを確認してください。

于 2010-01-10T01:45:34.520 に答える
2

後続の各画像の効果を次のように遅らせることで、それらを順次フェードインすることもできます (注: window.load を使用して、アニメーションを開始する前にすべての画像が読み込まれるようにしています)。

$(window).load(function() {

        var delay = 0;

        $('img').each(function() {
            $(this).delay(delay).fadeIn();
            delay += 150;
        });

    });

これは、各アニメーションが完了するまで待つのではなく、アニメーションを重ねるのに最適です。次のようにランダム化することもできます。

$(window).load(function() {

        var delay = 0;

        $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() {
            $(this).delay(delay).fadeIn(600);
            delay += 150;
        });

    });
于 2010-07-26T18:58:56.243 に答える