2

クリックしたときに 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」クラスを持つことになります。1 回クリックすると正常に動作しますが、2 回クリックすると、.centericon はクラス .fadeOutDown のみを取得します。

4

2 に答える 2

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

            });
        }
    });
于 2013-04-06T17:50:07.723 に答える
-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");
    });
});
于 2013-04-06T04:47:59.393 に答える