javascript - Removing and Adding CSS Class with jQuery -

i've area i'd add css animation when it's clicked, , bring animation when it's loading.

i'm using twitter's bootstrap's tabs , turned on "fade" transition between tabs, want animate inside of tabs while they're switching. don't want mess root j.s. code there i'll settle work around.

heres code:

   $(".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");                 });         }     }); 

the .centericon class repeated, after 1 click, multiple instances have "fadeindown" class. works fine when click 1 time, if click twice, .centericon gets class .fadeoutdown.

$(".tabit").click(function (){         //scroll 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();              });         }     });