0

スクロール イベントで css を変更しようとしていますが、動作しています。

$(window).scroll(function () {
    $(".navcont").css("background-color", "pink")
});

しかし、遅延を与えて元に戻そうとすると、

$(window).scroll(function () {
    $(".navcont").css("background-color", "pink")
        .delay( 5000 )
        .css("background-color", "white");
});

それは常にピンク色を示していますが、最初に白い色が必要で、次に遅延してからピンク色が必要です。

誰かがこれで私を助けることができます! 前もって感謝します

4

3 に答える 3

1

setTimeoutなしでのみを使用してみてくださいanimate:

$(window).scroll(function () {
    $(".navcont").css("background-color", "pink");
    setTimeout(function() {$(".navcont").css("background-color", "white")}, 8000);
});

ここでjsFiddle。

于 2013-09-04T15:36:38.730 に答える
0

delay() 関数は、すべての関数ではなく、 jQuery のエフェクト キューでのみ機能します。エフェクトには、fadeIn、slideUp などがあります。animate() というカスタム エフェクト ジェネレーターがあり、delay() で使用できます。ただし、背景色などの数値以外のプロパティをアニメーション化することはできません。だからここにトリックがあります -

$(window).scroll(function () {
    $(".navcont")
    .animate({dummyProperty: "dummyValue"},1,"linear",function(){
        $(this).css("background-color","pink")
    })
    .delay( 80000 )
    .animate({dummyProperty: "dummyValue"},1,"linear",function(){
        $(this).css("background-color","blue")
    });
});
  1. animate の最初の引数は、アニメーション化する CSS プロパティです。background-color はアニメーション化できないため、ここではダミーのプロパティを使用します (ここでは何でも使用できますが、違いはありません)。
  2. 2 番目の引数は、アニメーションの時間です。delay() 関数を使用して実際の遅延を設定するため、ここでは 1 ミリ秒のみを使用します。
  3. 3 番目の引数はイージングです (この場合は関係ありません)。
  4. 4 番目の引数は、選択した HTML 要素を指す「this」を持つコールバック関数です。ここで背景色を変更します。
于 2013-09-04T15:45:38.267 に答える