0

簡単なクエストになると思うので、ここで質問することについてはほとんど申し訳ありませんが、私はまだ学習しているので、jQueryを使用してこれを構築する方法を理解できません。

正しくコーディングされていないWebサイトを、あちこちにあるjavascriptアニメーションでクリーンアップしようとしているので、維持するのが面倒なDHTML / Javascriptハックではなく、すべての部分をjQueryに変換して、開発を簡素化したいと思います。

状況

私は2つのDIVを持っています。1つは「表示された画像」用です。

<div id="fader"></div> /* the shown object */

次に、HTMLのどこかに、そのフェーダーコンテナーに表示するユーザー定義の画像リストがあります。

画像は私が呼んだコンテナに入っています

        <div id="fadercontent"></div>

このような：

        <div id="fadercontent">
                <div><img src="image0101.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0444.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0256.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image6821.jpg" width="200" height="200" border="0" alt="" /></div>
        </div>

このリストのサイズはさまざまです。画像が1つあるものもあれば、20があるものもあります... DIVの理由は、いつかIMGから別の画像に変更する可能性があるためです。そこで、DIV +すべてのコンテンツを取得し、この「DIV」を「フェーダー」オブジェクトにフェードインしたいと思います。

ソリューション/アイデア

私は最初にそれらを配列に集めようとしていました。フェーダーコンテンツDIVからリストを取得する。

何かのようなもの：

var fadercontent = $('#fadercontent').children();

次に、fadercontentから最初のアイテムを取得し、「＃fader」のコンテンツを置き換えます。

$（ "＃fader"）。html（...）がコンテンツを置き換える方法であり、fadeIn（）が不透明度フェーダーになることがわかりました。

私が理解できないのは：

1）次のアイテムを追跡するにはどうすればよいですか。リストをループできるように、fadercontentオブジェクトで次を見つけます。javascriptでは、配列の長さと単純なカウンターを使用しました。

2）アニメーションの速度を設定するにはどうすればよいですか。フェードインを2秒間構築し、次に1秒間一時停止し、次に2秒間フェードアウトし、画像を置き換え、2秒間フェードイン（ループ）しようとしています。jQuery.Animateはおそらく必要ですか？

jQueryの才能を持つ誰かが、私がここでさらに進む必要があることを教えてくれることを願っています。

4

1 に答える 1

1

以下のコードは、の各子をループし、...faderContentのhtmlを置き換えfaderます。これは続行され、最後に到達すると最初から開始されます。

var index = -1;
var max = $("#fadercontent").children().length;
FadeNext();

function FadeNext() {
    index++;
    // check if at the end, otherwise start over
    if (index >= max) index = 0;

    // if #fader has no children, fadeOut will never be executed
    if ($("#fader").children().length > 0) {
        $("#fader").children().fadeOut(2000, DoFade);
    }
    else DoFade();
}

function DoFade() {
    // clone the object rather than move it so you can use it again.
    var $clone = $("#fadercontent").children().eq(index).clone().hide();

    $("#fader").html($clone);
    // fade in
    $("#fader").children().fadeIn(2000, function() {        
        FadeNext();
    });
}

実例： http： //jsfiddle.net/Jruns/2/

于 2011-01-11T18:15:52.077 に答える