Jquery addclass nach scrollen 500 Pixel

Möchte ich hinzufügen, dass eine class zu einem div-nach 500 Pixel scrollen unten auf der Seite mit jquery. Ich fand einen Weg, es zu tun, aber es ist ein unmittelbarer übergang, ich möchte in der Lage zu kontrollieren, wie lange es dauert, bis die Klasse hinzuzufügen, wie mit der normalen Jquery addclass.

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

Habe ich versucht, dies zu tun:

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

aber es war das gleiche.

Ich glaube, er redet über den übergang zwischen zwei Klassen bei der Verwendung .toggleClass mit jQueryUI. EDIT Oh, haben Sie schon beantwortet. Duh.

InformationsquelleAutor Dave | 2013-08-17

  1. 2

    Ich möchte in der Lage zu kontrollieren, wie lange es dauert, bis die Klasse hinzuzufügen, wie mit der normalen Jquery addclass.

    addClass ist immer Echtzeit, es ist nicht Teil der animation suite.

    Gibt es plugins, die die Klasse-basierte Animationen, die für Sie (vor allem jQuery-UI addClass ersetzt), aber jQuery selbst nicht. Einfaches hinzufügen von jQuery UI auf Ihrer Seite wird Ihr zweites Beispiel Arbeit. Aber es gibt auch andere Optionen, wie gut.

    Sind Ihre Optionen, um die Verwendung eines dieser plugins, oder animieren Sie die Eigenschaften direkt (über animieren) anstatt über eine Klasse. Beachten Sie, dass jQuery nur animiert, bestimmte Arten von Eigenschaften (nicht, insbesondere, Farben — jQuery-UI-fügt Unterstützung für das animieren von Farben).

    Hier ist ein Beispiel zu animieren, eine Klasse (mit Farben) Verwendung von jQuery UI: Live-Kopie | Live-Quelle

    <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>
    Mit animieren hat hervorragend funktioniert. Danke!
    Ah, gut, froh, dass es geholfen hat.
    Eine andere Frage, es bewegt sich, wenn ich nach unten scrollen aber gibt es eine Möglichkeit zu animieren, die Sie zurück, wenn Sie Blättern zurück an die Spitze?

    InformationsquelleAutor T.J. Crowder

  2. 0

    ES FUNKTIONIERT GUT FÜR MICH.

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

    statt 1000 U einfach die Zeit.

    InformationsquelleAutor Nikhil sHETH

  3. 0

    können Sie tun, dass mit Hilfe von jQuery oder $ - Zeichen

    Beispiel:

    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $("#logo-not-scroll").addClass("blue1");
    }
    else{
        $("#logo-not-scroll").removeClass("blue1");
    }
});

    oder 

    jQuery(window).scroll(function() {    
        var scroll = jQuery(window).scrollTop();
        if (scroll >= 100) {
            jQuery("#logo-not-scroll").addClass("blue1");
        }
        else{
            jQuery("#logo-not-scroll").removeClass("blue1");
        }
});

    InformationsquelleAutor Rizo

Schreibe einen Kommentar