如何爲addClass（）和removeClass jQuery方法設置動畫效果？

Question

我正在一個網站上工作，並希望通過在點擊事件下添加「.hidden」引導類來顯示和隱藏它的各個部分。 基本上是：

$('selector').click(function(){ 
    $('*part-to-hide*').addClass("hidden"); 
    $('*part-to-show*').removeClass("hidden"); 
    } 

它的正常工作，但需要一定的流暢的動畫。我有什麼選擇？

注意：雖然我看到過類似的問題，但我認爲我的不同（因此不是重複的），因爲它圍繞使用引導「隱藏」類。在那個筆記上，如果答案在堅持代碼的主要思想的同時解決了問題，那麼我會很感激，代碼的主要思想是向元素添加和刪除「隱藏」類。

Answer 1

只是一個過渡屬性分配給你的元素;在這裏） 檢查的詳細信息：https://www.w3schools.com/css/css3_transitions.asp

小提琴： https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

Answer 2

$('#selector').on('click',function(){ 
 
    if($(this).attr("data-animate")=="0"){ 
 
     $('#Div1').removeClass('Div2').addClass('Div1'); 
 
     $(this).attr("data-animate","1"); 
 
      $(this).val("Change color"); 
 
    } 
 
    else{ 
 
    $('#Div1').removeClass('Div1').addClass('Div2'); 
 
      $(this).attr("data-animate","0"); 
 

 
       $(this).val("start animate"); 
 
    } 
 
    
 
     
 
});

.Div2{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
 
    animation-name: example2; 
 
    animation-duration: 4s; 
 
} 
 

 
.Div1{ 
 

 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes example { 
 
    0% {background-color:red; left:0px; top:0px;} 
 
    25% {background-color:yellow; left:200px; top:0px;} 
 
    50% {background-color:blue; left:200px; top:100px;} 
 
    75% {background-color:green; left:0px; top:100px;} 
 
    100% {background-color:red; left:0px; top:0px;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    0% {background-color:red; left:0px; top:0px;} 
 
    25% {background-color:yellow; left:200px; top:0px;} 
 
    50% {background-color:blue; left:200px; top:100px;} 
 
    75% {background-color:green; left:0px; top:100px;} 
 
    100% {background-color:red; left:0px; top:0px;} 
 
} 
 

 
@-webkit-keyframes example2 { 
 
    0% {background-color:red;} 
 
    25% {background-color:yellow; } 
 
    50% {background-color:blue; } 
 
    75% {background-color:green; } 
 
    100% {background-color:red;} 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="selector" type="button" data-animate="0" value="start animate"/> 
 
<div id="Div1"></div>

Answer 3

$(document).ready(function() { 
 
    $(".togglediv").on('click',function(){ 
 
     $(".showdiv").toggleClass("hidden"); 
 
     $(".hidediv").toggleClass("hidden"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="parent"> 
 
     <div class="col-md-6 col-sm-6 col-xs-6"> 
 
      <div class="showdiv hidden"> 
 
      show div 
 
      </div> 
 
       <div class="hidediv"> 
 
      hide div 
 
      </div> 
 
     </div> 
 
     <button class="togglediv">show/hide content</button> 
 
    </div> 
 
</div></div>