javascript - 使用 jQuery 删除和添加 CSS 类

Question

我有一个区域，我想在单击它时添加一个 CSS 动画，然后在加载时将它与另一个动画一起带回来。

我正在使用 Twitter 的 Bootstrap 选项卡并打开选项卡之间的“淡入淡出”过渡，但希望在它们切换时专门为这些选项卡内的某些内容设置动画。我不想弄乱那里的根 JS 代码，所以我只是解决了一个问题。

这是我的代码：

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