0

編集: 目的を明確にするために、最終的にドキュメントの準備が整い、最初のアニメーションが開始されると、ティッカーはきれいにフェードインする必要があります。コードのマイナーな更新とデモがここにありますhttp://jsfiddle.net/pushplaybang/aFSJk/ スタートはまだ少し途切れ途切れですが、改善されています

私は現在、証言用のティッカーを作成しています。これは、ページがロードされたらsetTimoutを使用してティッカーをフェードインしようとしていますが、setTimoutを使用すると、ページのロード中に表示される最初のアイテムが停止します。 、しかし、意図したようにゆっくりとフェードインするのではなく、突然所定の位置にスナップします。

誰かが私がこれをしている方法を修正できますか? フェードインさせる良い方法はありますか？

以下はドキュメント対応関数でラップされることに注意してください。付随する CSS では、コンテナーは最初は display:none に設定されています。

function bangingTicker(container,element) {

    var tickContainer = $(container);

    setTimeout(function(){
    tickContainer.fadeIn(1000);
    },6200);

        function tick(){
            var tickElem = tickContainer.children(element);
            tickElem.eq(1).siblings().animate({
                opacity: 0
                },400, function() {
                    tickContainer.stop(true,true).delay(10).animate({
                    'margin-top': 120
                    },0,function() {
                        tickContainer.delay(100).animate({
                        'margin-top': 20
                        },8000);
                    });
                        tickElem.first().appendTo(tickContainer);
                        tickElem.eq(1).delay(200).animate({
                            opacity: 1
                        },400);
                    });

        }

        setInterval(function(){ tick () }, 6000);

}

bangingTicker('#testi_ticker','li');
4

2 に答える 2

0

このjsfiddleを試してください。これはあなたが必要とするものですか？

于 2012-08-02T11:22:08.037 に答える
0

今日しばらくこれに取り組んだ後、コードを改善できるように感じますが、思い通りに動作するようになりました.css / htmlへの依存をできるだけ少なくしたいのですが、動作して見えます同様に素晴らしい。

このjsフィドルをチェックしてください。 http://jsfiddle.net/pushplaybang/aFSJk/3/

要約は次のとおりです。

  • setTimout をまとめて削除する

  • setInterval 関数の設定と同時に tick 関数を 1 回実行する

  • これにより、アニメーションが開始する前の遅延が停止します。

  • コールバック内の tick 関数全体を fadeIn にラップします。

  • 子要素のcssで不透明度を0に設定して、tick関数によってのみフェードインされるようにします
于 2012-08-02T13:59:32.340 に答える