web-dev-qa-db-fra.com

Comment animer les fonctions JQuery addClass/removeClass?

Je veux savoir comment animer les fonctions JQuery addClass/removeClass?

pour la fonction animate, il me semble que je dois mettre quelques propriétés CSS, mais qu’en est-il si j’ai une classe qui rend l’élément affiché comme un bloc à chaque fois que je déclenche une fonction de clic, alors que tous les éléments sont affichés comme masqués 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>
jqueryjquery-animateaddclassremoveclass
7
CairoCoder

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

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

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

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

2
Derek

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

Cela devrait fonctionner pour vous. Vous pouvez ajouter d'autres transitions à en remplaçant display dans le style de transition.

1
johnkoht

Vous pouvez certainement animer pour ajouter/supprimer une 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

NOTE: _ Mais vous devez ajouter jquery-ui.js fichier pour le faire fonctionner.

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

J'espère que cela vous sera utile. Merci

0
Ibnul Hasan