Wie animiert man JQuery addClass/removeClass-Funktionen?

Question

Ich möchte wissen, wie JQuery addClass/removeClass Funktionen zu animieren? Für die Animate-Funktion scheint es, dass ich einige CSS-Eigenschaften einfügen muss, aber was ist, wenn ich eine Klasse habe, die das Element jedes Mal als Block anzeigt, wenn ich eine Klick-Funktion triggere, während alle Elemente in CSS versteckt angezeigt werden . Wie kann ich diesen Prozess animieren?

Hier ist mein 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> 

Answer 1

Sie die CSS3 Übergang Eigenschaft auf das Element anwenden können, werden mit jQuery manipuliert. Hier ist ein Beispiel mit Verkäufer Präfixe:

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

Answer 2

Sie können mit jQuery .fadeIn() oder können Sie CSS3 Übergänge verwenden:

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

Das sollte für Sie arbeiten. Sie können andere Übergänge hinzufügen, indem Sie display im Übergangsstil ersetzen.

Answer 3

Wenn Sie jQueryUI verwenden, können Sie die $ .toggleClass(); Funktion.

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

Answer 4

Sie können auf jeden Fall animieren mit jquery.Please hinzufügen/entfernen Klasse überprüfen Sie das Format unter

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

Beispielcode unten

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

Reference link

HINWEIS: Aber Sie müssen jquery-ui.js Datei hinzufügen, damit es funktioniert.

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

Hoffe, das wird hilfreich sein. Danke