使用jQuery去除和添加CSS類

Question

我有一個區域，我想添加一個CSS動畫，當它被點擊時，然後在加載時將它帶回另一個動畫。

我使用的是Twitter的Bootstrap選項卡，並打開了選項卡之間的「淡入淡出」轉換，但希望在切換時專門爲這些選項卡內的某些內容設置動畫。我不想惹根J.S.代碼在那裏，所以我只會解決一個工作。

繼承人我的代碼：

$(".tabit").click(function(){ 

     //Drop Center Icon on click 
     if ($('.centericon').hasClass('fadeInDown')) { 
      $(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){ 
       $(this).removeClass("fadeOutDown").addClass("fadeInDown"); 
       }); 
     } 
     else{ 
      $(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){ 
       $(this).removeClass("fadeOutDown").addClass("fadeInDown"); 
       }); 
     } 
    }); 

的.centericon類是重複的，所以經過1次點擊，多個實例將有 「fadeInDown」 級。當我點擊一次時工作正常，但如果我點擊兩次，那麼.centericon只會獲得類.fadeOutDown。

Answer 1

$(".tabit").click(function(){ 
     //Scroll to top when navigating through tabs 

     //Drop Center Icon on click 
     if ($('.centericon').hasClass('fadeInDown')) { 
      $(".centericon").removeClass('fadeInDown').addClass("fadeOutDown"); 
      $(".centericon").delay(100).queue(function() { 
       $(this).removeClass('fadeOutDown'); 
       $(this).dequeue(); 

      }); 
      $(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown"); 
     } 
     else{ 
      $(".centericon").addClass("fadeOutDown"); 
      $(".centericon").delay(100).queue(function() { 
       $(this).removeClass('fadeOutDown').addClass("fadeInDown"); 
       $(this).dequeue(); 

      }); 
     } 
    }); 

Answer 2

變化click到toggle

$(".tabit").toggle(function() { 
    $(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) { 
     $(this).removeClass("fadeOutDown").addClass("fadeInDown"); 
    }); 
}, function() { 
    $(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) { 
     $(this).removeClass("fadeOutDown").addClass("fadeInDown"); 
    }); 
});