2

jqueryを使用してページを500px下にスクロールした後、クラスをdivに追加したいと考えています。私はそれを行う方法を見つけましたが、それは即時の移行です。通常の Jquery addclass のように、クラスを追加するのにかかる時間を制御できるようにしたいと考えています。

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass");
    }
});

私はこれをやってみました：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".nav").addClass("navnewclass", 2000);
    }
});

でも同じでした。

4

3 に答える 3

2

通常の Jquery addclass のように、クラスを追加するのにかかる時間を制御できるようにしたいと考えています。

addClass常に瞬間的で、アニメーション スイートの一部ではありません。

クラスベースのアニメーションを行うプラグインがありますが (最も注目すべきはjQuery UI のaddClassoverride )、jQuery 自体にはありません。ページに jQuery UI を追加するだけで、2 番目の例が機能します。しかし、他のオプションもあります。

オプションは、これらのプラグインの 1 つを使用するかanimate、クラスを使用するのではなく、( を使用して) プロパティを直接アニメーション化することです。jQuery は特定の種類のプロパティのみをアニメーション化することに注意してください (特に色ではありません。jQuery UI では、色のアニメーション化もサポートされています)。

jQuery UI を使用してクラスを (色で) アニメーション化する例を次に示します。ライブソース

<style>
.testing {
  color: white;
  background-color: blue;
}
</style>

<!-- ...and later in the body... -->

<p>After half a second, the div below will spend two seconds animating the addition of a class.</p>
<div class="nav">This is a test .nav element</div>
<script>
setTimeout(function() {
    $(".nav").addClass("testing", 2000);
}, 500);
</script>
于 2013-08-17T12:27:05.383 に答える
0

それは私にとってはうまくいくでしょう。

$(document).scroll(function() {    
var scroll = $(this).scrollTop();
if (scroll >= 500) {
setTimeout('$(".nav").addClass("navnewclass")',1000);
}
});

1000 U の代わりに時間を設定できます。

于 2013-08-17T13:40:50.727 に答える