8
votes

Comment animer les fonctions JQuery AddClass / Removeclass?

Je veux savoir comment animer les fonctions JQuery AddClass / Removeclass?

Pour une fonction Animate, il semble que je dois placer certaines propriétés CSS, mais qu'en est-il si j'ai une classe qui fait un élément affiché comme un bloc à chaque fois Je déclenche une fonction de clic, tandis que tous les éléments sont affichés comme masqués dans CSS. Comment puis-je animer ce processus? P>

Voici mon code: P>

<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>

jquery jquery-animate addclass removeclass

1 commentaires

Bonjour Cairocoder Trouver la solution ci-dessous :)

4 Réponses :

15
votes

Vous pouvez appliquer la propriété de transition CSS3 à l'élément manipulé avec JQuery. Voici un exemple avec les préfixes du fournisseur: xxx

0 commentaires

1
votes

Vous pouvez utiliser jQuery .Fadein () ou vous pouvez utiliser les 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;
}

0 commentaires

2
votes

Si vous utilisez jQueryui, vous pouvez utiliser le $ .Toggleclass (); fonction.

http://api.jqueryui.com/toggleclass/

0 commentaires

0
votes

Vous pouvez définitivement animé pour ajouter / supprimer la classe avec jQuery.Veuillez vérifier le format ci-dessous

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

0 commentaires