0

同様の問題に関するいくつかの質問を見てきましたが、私にとって意味のある解決策はまだ見つかりません。問題は JSFiddle にあります: http://jsfiddle.net/twchapman/EEXjR/2/

Portfolio をクリックして動作を確認します。

私が書いた関数：

function changeTab(tab) {
    active = tab;
    $("#" + tab).slideDown(animspeed);
}

function change(tab) {
    if (tab == active) return;
    $("#" + active).slideUp(animspeed, function () {
        changeTab(tab);
    });
}

私は Chrome のみを使用していますが、どのブラウザーでもこのエラーが発生することは間違いありません。ページが読み込まれると、コンテンツ div が下にスライドし、リンクをクリックすると (現時点では Portfolio のみが実際に機能します) スライドします。現在の div を上に、次に正しい div を下に。

ほぼ完全に意図したとおりに機能していますが、小さな問題が 1 つあります。アニメーションが開始されると、div の高さが「ジャンプ」し、アニメーションの実行中に一時的に高くなり、終了時に正しいサイズに「ジャンプ」します。

私が見つけた2つの一般的な解決策が提案されています.1.すでに存在するdivのスタイルに幅を追加し、2.呼び出されたときにスライド関数の高さ/マージンパラメータを変更します。私には、アニメーションの長さ以外のオプションを提供していないため、2 番目の解決策は必要ないように思えます。

これは単に私が何かを見逃していて愚かであることを願っています。私のやり方に大きな問題はありません。

4

2 に答える 2

0

この問題は、jQuery アニメーションをぎくしゃくさせるパディングに起因します。問題の迅速な解決策は、JS をそのままにして、レイアウトに自然なボックス モデルを使用することです。

あなたのCSSに以下を含めるだけです：

* { -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box; 
            box-sizing: border-box; }

このポール アイリッシュのブログ投稿を読んで、すべてのプロジェクトにこのコードを含めることを強くお勧めします。

これが実際のデモです: http://jsfiddle.net/gleezer/EEXjR/3/

于 2013-01-25T03:14:48.933 に答える
0

js を更新します。

function change(tab) {
    if(tab == active) return false;
    console.log(tab);
    console.log(active);
    if($("#" + active).length){   //check element is exists.
       $("#" + active).slideUp(animspeed, function() {changeTab(tab)})
    }else{
    changeTab(tab);
    }

}
于 2013-01-25T01:25:54.577 に答える