Jquery addclass après le défilement 500px

Je veux ajouter une classe à un div après le défilement 500px en bas de la page à l'aide de jquery. J'ai trouvé un moyen de le faire, mais c'est une transition immédiate, je veux être en mesure de contrôler combien de temps il faut pour ajouter la classe comme à la normale Jquery addclass.

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

J'ai essayé de faire ceci:

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

mais c'était la même chose.

  • Je crois qu'il parle de la transition entre les deux classes lors de l'utilisation de .toggleClass avec jQueryUI. MODIFIER Oh, vous avez déjà répondu. Duh.
InformationsquelleAutor Dave | 2013-08-17
  1. 2

    Je veux être en mesure de contrôler combien de temps il faut pour ajouter la classe comme à la normale Jquery addclass.

    addClass est toujours instantanée, il ne fait pas partie de l'animation de la suite.

    Il y a des plugins qui font de la classe de base des animations pour vous (notamment jQuery UI addClass remplacer), mais de jQuery ne fonctionne pas. Tout simplement l'ajout de jQuery UI pour votre page fera de votre deuxième exemple de travail. Mais il y a d'autres options aussi bien.

    Sont vos options pour utiliser l'un de ces plugins, ou animer les propriétés directement (à l'aide de animer) plutôt que d'utiliser une classe. Notez que jQuery seulement anime certains types de propriétés (pas, notamment, les couleurs — jQuery UI ajoute la prise en charge de l'animation les couleurs ainsi).

    Voici un exemple d'animation d'une classe (avec des couleurs) à l'aide de jQuery UI: Vivre Copie | La Source En Direct

    <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>
    • À l'aide de l'animer a fonctionné à merveille. Merci!
    • Ah, bon, heureux qui m'ont aidé.
    • Une autre question, il s'anime quand je scroll vers le bas, mais est-il une façon de l'animer en arrière quand vous faites défiler vers le haut?
    InformationsquelleAutor T.J. Crowder
  2. 0

    IL FONCTIONNE PARFAITEMENT POUR MOI.

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

    au lieu de 1000 U pouvez simplement mettre votre temps.

    InformationsquelleAutor Nikhil sHETH
  3. 0

    vous pouvez le faire à l'aide de jQuery ou de signe de $

    exemple:

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

    ou 

    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