Jak animować funkcje JQuery addClass/removeClass?

Question

Chcę wiedzieć, jak animować funkcje JQuery addClass/removeClass?

dla funkcji animacji, wydaje się, że muszę wstawić pewne właściwości CSS, ale co jeśli mam klasę, która sprawia, że ​​element wyświetlany jest jako blok za każdym razem, gdy uruchomię funkcję kliknięcia, podczas gdy wszystkie elementy są wyświetlane jako ukryte w CSS . Jak mogę animować ten proces?

Oto mój kod:

<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

Można zastosować właściwość przejścia CSS3 do elementu są manipulowane z jQuery. Oto przykład z prefiksów dostawcy:

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

Answer 2

Można użyć jQuery .fadeIn() lub użyć przejścia 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; 
} 

To powinno pracować dla Ciebie. Możesz dodać dowolne inne przejścia, zastępując display stylem przejścia.

Answer 3

Jeśli używasz jQueryUI, możesz użyć metody $ .toggleClass(); funkcjonować.

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

Answer 4

Można zdecydowanie animować do dodawania/usuwania klasy z jquery.Please sprawdzić format poniżej

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

przykładzie kodu poniżej

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

Reference link

UWAGA: Ale musisz dodać plik jquery-ui.js, aby działało.

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

Mam nadzieję, że będzie to pomocne. Dzięki