如何動畫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> 

希望這會有所幫助。 謝謝