使用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"); 
    }); 
});