Come animare le funzioni JQuery addClass/removeClass?

Question

Voglio sapere come animare le funzioni addClass/removeClass di JQuery?

per funzioni animate, sembra che devo mettere alcune proprietà CSS, ma che dire se ho una classe che rende l'elemento visualizzato come blocco ogni volta che faccio scattare una funzione clic, mentre tutti gli elementi sono visualizzati come nascosti nei CSS . Come posso animare questo processo?

Ecco il mio codice:

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

Answer 1

è possibile applicare la proprietà CSS3 raccordo con l'elemento essere manipolato con jQuery. Ecco un esempio con i prefissi vendor:

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

Answer 2

È possibile utilizzare jQuery .fadeIn() oppure è possibile utilizzare le transizioni 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; 
} 

che dovrebbe funzionare per voi. Puoi aggiungere altre transizioni sostituendo display nello stile di transizione.

Answer 3

Se si utilizza jQueryUI è possibile utilizzare $ .toggleClass(); funzione.

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

Answer 4

Si può sicuramente animare per aggiungere/rimuovere classe con jquery.Please controllare il formato di sotto

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

codice di esempio riportato di seguito

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

Reference link

NOTA: Ma devi aggiungere il file jquery-ui.js per farlo funzionare.

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

Spero che questo sia utile. Grazie