Как оживить функции JQuery addClass/removeClass?

Question

Я хочу знать, как оживить функции JQuery addClass/removeClass?

для функции анимации, кажется, что я должен поместить некоторые свойства CSS, но как насчет того, если у меня есть класс, который заставляет элемент отображаться как блок каждый раз при запуске функции щелчка, тогда как все элементы отображаются как скрытые в CSS , Как я могу оживить этот процесс?

Вот мой код:

<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

Вы можете применить свойство CSS3 перехода к элементу манипулируют с JQuery. Вот пример с префиксами:

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

Answer 2

Вы можете использовать JQuery .fadeIn() или вы можете использовать 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; 
} 

Это должно работать для вас. Вы можете добавить любые другие переходы, заменив display в стиле перехода.

Answer 3

Если вы используете jQueryUI, вы можете использовать $ .toggleClass(); функция.

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

Answer 4

Вы можете определенно анимировать, чтобы добавить/удалить класс с jquery.Please проверить формат ниже

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

Пример кода ниже

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

Reference link

ПРИМЕЧАНИЕ: Но вы должны добавить файл jquery-ui.js, чтобы заставить его работать.

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

Надеюсь, это будет полезно. Thanks