3

jQueryを使用して、ページの読み込み時にnavdiv内のリンクをフェードインしたいと思います。現在、それらはを使用してスタイル設定されておりa、個別のIDを持っています。

#navtop a {etc.}

それをクラスに変更し、リンクを非表示にする別のクラスを追加して、フェードインの開始時にクラスを再適用する必要がありますか、それとももっと簡単な方法がありますか？

また、リンクを次々にフェードインしてほしい。

HTML：

<div id="navtop">
    <a id="link1" href="link.php"><img src="img/logotrans.gif" width="30" height="30" /></a>
    <a id="link2" href="link.php">News</a>
    <a id="link3" href="link.php">Blog</a>
    <a id="link4" href="link.php">Tour</a>
    <a id="link5" href="link.php">Photos</a>
    <a id="link6" href="link.php">About</a>
    <a id="link7" href="link.php">Contact</a>
 </div>

これは私がJavaScriptで得た限りです：

$(window).load(function() {
    $('#link1').fadeIn(5000, function() {
        // Animation complete
    });
});
4

3 に答える 3

3

jQueryキューを使用してフェードインをキューに入れることができます。そのようです：

jsFiddleでライブをご覧ください。

//--- Queue-up the fade-in's
var animationQ = $({});

$("#navtop a").each ( function () {
    var jThis = $(this);

    animationQ.queue ('FadeIns', function (nextQ_Item) {

        jThis.fadeIn (5000, function() {
            nextQ_Item ();
        } );
    } );
} );

//--- Start the fade-ins.
animationQ.dequeue ('FadeIns');


このアプローチには、セレクターを変更するだけで、ノードの任意のコレクションをキューに入れることができるという利点があります。彼らは兄弟である必要はありません。

更新：
フェードインの開始を途中でずらすには、次を使用します。

var fadeTime    = 5000; //-- How long will an individual fade last? (mS)
var fadeStagger = 500;  /*-- How far into i=one element's fade will 
                             the next elements fade start? (mS)
                        */

//--- Queue-up the fade-in's
var animationQ = $({});

$("#navtop a").each ( function (J) {
    var jThis = $(this);

    animationQ.queue ('FadeIns', function (nextQ_Item) {
        jThis.fadeTo (fadeStagger, fadeStagger / fadeTime , function() {
            nextQ_Item ();
            jThis.fadeTo (fadeTime - fadeStagger, 1);
        } );
    } );
} );

//--- Start the fade-ins.
animationQ.dequeue ('FadeIns');


jsFiddleでご覧ください。

要求された説明：

  1. 空のオブジェクト（）でjQueryを実行して、汎用キューコンテナを設定します$({})。これは、キューをノードに接続するよりもクリーンなようです。

  2. 有効なjQueryセレクターを使用してノードを選択し、each()関数Docを使用してノードをループします。

  3. ノードごとに、queue()関数Docを使用して、カスタムキューにエントリを追加します。

    1. 競合を避けるために、キューに「FadeIns」という一意の名前を付けます。
    2. 各キューエントリは、呼び出されたときに次のキューエントリへのポインタを渡します。nextQ_Itemそれを変数でキャプチャします。
    3. キューアイテム、関数には2つのジョブがあります。（1）アイテムのフェードを実行し、（2）完了したら次のキューエントリを呼び出します。
    4. ただし、目的のスタッガードスタートを実現するために 、フェードドキュメントを2つの部分に分割しました。
      1. 最初のフェードはfadeStagger遅延時間の間だけ続きます。全体の時間に対する遅延時間の比率によって終了不透明度を計算します。
      2. 次に、次の要素をトリガーします。
      3. 次に、フェードを再開して完了します。残りのミリ秒は（total --stagger-delay）だけであることを思い出してください。
  4. カスタムキューが作成されたら、dequeue()関数Docを使用してキューを起動します。
于 2011-08-14T11:04:54.573 に答える
1

マークアップを変更する必要はありません。あなたが望むことは、以下のコードで簡単に達成することができます。実例： http： //jsfiddle.net/tw16/pJ5uC/

$(window).load(function () {
    fadeA($('#navtop a:first-child'));
});

function fadeA(elem) {
    elem.fadeIn(500, function () {
        fadeA($(this).next());
    });
}

表示プロセスを高速化するために、5000ではなく500を使用しました。

于 2011-08-14T10:58:55.183 に答える
0

これにより、すべてのフェードインが同時に行われます。

$('#navtop a').fadeIn('slow', function() {
   // Animation complete
});

ある種のsetTimeoutを設定し、それらをループする必要があります

于 2011-08-14T10:22:24.223 に答える