Removing and Adding CSS Class with Javascript

[mono2009]

I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.Heres my code:\[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"); }); } });\[/code\]The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.