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类，因此在单击一次后，多个实例将具有“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");
    });
});

使用jQuery删除和添加CSS类

2 个答案: