0

私はjQueryを使用していくつかのタブを作成してきましたが、タブコンテナーのサイズのアニメーションに一貫性がなく、最初の実行では少しジャンプしてタイミングがずれていることを除いて、かなりうまく調和しています。

タブトリガーをクリックすると、現在のタブがフェードアウトし、新しいcontnetが表示されます（正確な高さを取得できるように不透明度を0に設定）-コンテナの高さを調整し、アクティブなタブで不透明度をフェードインします。

動作しますが、いずれかのタブを最初にクリックするとバグが発生します。もう一度タブをクリックすると、完全に実行されます。何が間違っているのでしょうか。

完全なコードとデモについては、ここでjsfiddleをチェックしてください。http：//jsfiddle.net/pushplaybang/rjS2B/

私のスクリプトは次のようになります：

var tabs = {

trig   : $('nav.tab-triggers'),
content: $('section.tabs-content'),
panels : $('section.tabs-content').children(),

// Kick off
init   : function() {
    $.each(tabs.content,function(index, value) {
         $(value).children(':first').addClass('active').show().children().css('opacity', '1');
        $(value).children().not(':first').children('opacity', '0').end().hide();
    });
    tabs.address([tabs.trig]);
    tabs.address([tabs.content]);
    tabs.trig.on('click', 'a', tabs.display);
},

// assign incremental classes hrefs and id's to containers (grouped by class), triggers, and panels
address: function(obj) {
    // for each obj
    $.each(obj, function(index,value) {
         $.each(obj[index], function(index2,value2) {
            $(value2).addClass('tabs-' + index2);
            var kids = $(value2).children();
            $.each(kids, function(index3, value3) {
                var kid = $(value3);
                // if its parent is a nav element
                if ( kid.parent().is('nav') ) {
                // add href
                    kid.attr('href', '#tab-' + index3);
                } else {
                // add matching ids
                    kid.attr('id', 'tab-' + index3);
                }
            });  // end loop through children elements
        }); // end loop through parent elements
    }); // iteration of passed obj
}, // end address method

display: function (e) {
    var clicked = $(this);
    var link    = clicked.attr('href');
    var target  = clicked.parent().next().children(link);
    var active = clicked.parent().next().children('.active');

    clicked.addClass('active').siblings().removeClass('active');

    active.children().animate({
        opacity : 0
    },180, function() {
        active.removeClass('active').fadeOut(20, function() {
            target.addClass('active').show(0, function() {
                var tabheight = target.outerHeight();
                target.parent().animate({
                    height: tabheight + 40
                },200, function() {
                    target.children().animate({
                        opacity : 1
                    });
                });
            });
        });
    });
    e.preventDefault();
} // end display method

}

tabs.init();

その微妙なバグですが、その迷惑です。

4

1 に答える 1

1

バグの理由：

  • アクティブなタブfadeOutの完全なコールバック：
    • 直接呼び出すtarget.addClass('active').showが、その子の不透明度が0に設定されていないため、現在の不透明度から1に延期された不透明度アニメーションが最初に何も実行されない
    • => .children（）。css（{opacity：0}）。end（）が子に移動して不透明度を変更する場所に、これらの連鎖呼び出しを挿入できます。 target.children().css({opacity: 0}).end().addClass('active').show

してはいけないこと（パフォーマンスと明確さのために）：

  • 遅延を0にしてshowを呼び出すと、結果がすぐに必要なアニメーションが作成されるため、非常に悪い結果になります（以前は、jQuery 1.9の方が優れているのでしょうか？）
  • 毎回アクティブなタブを取得します。単純なクロージャ変数は、最後のアクティブなタブを参照できます
  • 表示しているものとアクティブなものを比較しないため、アクティブなものを表示しようとするとアニメーションが再起動します
  • 現在のアニメーションを停止しないため、アニメーションをキューに入れる複数のクリックが発生します

ここでスライドトグルの実装を見ることができます：http： //jsfiddle.net/alexis_tondelier/Gf2dv/ アニメーションを停止し、アクティブなアイテムを参照し、同じかどうかをテストしてこの場合は閉じます。外をクリックすると閉じます（これは実際には完全には当てはまりません）。

于 2013-03-24T12:24:49.230 に答える