Comment animer JQuery addClass/removeClass fonctions?

Je veux savoir comment animer JQuery addClass/removeClass fonctions?

pour animer la fonction, il semble que je dois mettre quelques propriétés CSS, mais que si j'ai une classe qui rend l'élément affiché en tant que bloc à chaque fois que j'déclencher une fonction de clic, alors que tous les éléments sont affichés en tant que caché en CSS. Comment puis-je animer ce processus?

Voici mon code:

<script src="js/jquery-1.9.1.min.js"></script>
<script>

    var allSlides = $('li');

    $('#nextSlide').click(function(){
        var nextSlide = $('.active').next();
        if (nextSlide.length == 0)
        {
            var nextSlide = allSlides.first();
        }
        $('.active').removeClass('active');
        nextSlide.addClass('active');
        return false;
    });

    $('#prevSlide').click(function(){
        var prevSlide = $('.active').prev();
        if (prevSlide.length == 0)
        {
            var prevSlide = allSlides.last();
        }
        $('.active').removeClass('active');
        prevSlide.addClass('active');
        return false;
    });

</script>
pas encore le monsieur !!!
Bonjour CairoCoder trouver la solution ci-dessous 🙂

OriginalL'auteur CairoCoder | 2013-03-26

  1. 14

    Vous pouvez appliquer le CSS3 transition de la propriété de l'élément en cours de manipulation avec jQuery. Voici un exemple avec le fournisseur préfixes:

    element {
    -webkit-transition: all 2s; //Chrome
    -moz-transition: all 2s; //Mozilla
    -o-transition: all 2s; //Opera
    transition: all 2s;
}

    OriginalL'auteur aNewStart847

  2. 2

    Si vous utilisez jQueryUI vous pouvez utiliser le $.toggleClass(); fonction.

    http://api.jqueryui.com/toggleClass/

    OriginalL'auteur Derek

  3. 1

    Vous pouvez utiliser jQuery .fadeIn() ou vous pouvez utiliser des transitions CSS3:

    #nextSlide, #prevSlide {
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}
.active {
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

    Qui devrait fonctionner pour vous. Vous pouvez ajouter d'autres transitions, par le remplacement de display dans le style de transition.

    OriginalL'auteur johnkoht

  4. 0

    Vous pouvez certainement animer à ajouter/supprimer des classe avec jquery.Veuillez vérifier le format ci-dessous

    .removeClass( className [, duration ] [, easing ] [, complete ] )

    Exemple de code ci-dessous

    $( "div" ).click(function() {
   $( this ).removeClass( "big-blue", 1000, "easeInBack" );
});

    Lien de référence

    REMARQUE: Mais vous avez à ajouter jquery-ui.js fichier pour le faire fonctionner.

    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    Espère que ce sera utile.
    Grâce

    OriginalL'auteur Ibnul Hasan