jquery - jQuery animate height を使用すると背景の div がジャンプするのはなぜですか?

Question

更新: jsFiddle で私の問題を再現しました: http://jsfiddle.net/leongaban/3v8vW/3/

2 つのタブがあり、short をクリックするとフォーム背景の高さが短くなり、tall をクリックすると高さが増します。ただし、そのように耳障りな/「スキッピー」なアニメーションが発生することはありません。

タブをクリックすると、他のタブが非表示になります。

コードペン: http://codepen.io/leongaban/pen/wipba

ログインをクリックすると、アニメーションが表示されます。login div の高さは 290px で、register は 410px です。

この簡単な例からアニメーション コードを取得しました。

私がやろうとしているのは、高さを下に伸ばしたり上に縮小したりするだけで、位置と幅は同じままです。topそうしないとwidth、.form-backgrounddiv がクレイジーなサイズ変更を行い、アニメーション後に正しい位置で終了しないため、設定する必要がありました。

ここで何が起こっているか知っていますか？そして、どうやってそれをハッキングしますか？:)

jQuery

    // tabs
    $('#login-form #tab-register').click(function() {

        $('#login-form').fadeToggle();
        $(".form-background").animate(
            {
                "top": "-342px",
                "width": "400px",
                "height": "410px"
            },
            "slow", function(){
                $('#register-form').fadeToggle();
            });
    });

    $('#register-form #tab-login').click(function() {

        $('#register-form').fadeToggle();
        $(".form-background").animate(
            {
                "top": "-214px",
                "width": "400px",
                "height": "290px"
            },
            "slow", function(){
                $('#login-form').fadeToggle();
            });
    });

CSS

.container .login-container .login-box .form-background {
  position: relative;
  top: -342px;
  height: 410px;
  background: white;
  -webkit-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  z-index: -1;
}

コードペン: http://codepen.io/leongaban/pen/wipba

Answer 1

ここで確認してください: http://jsfiddle.net/nucky/Cu59K/

.topbar { 
  position: absolute; 
  top:0;
}

#form-bg {
  position:absolute; 
  top:60px;
}

Answer 2

動作中のjsFiddleデモ

あなたのtabs外側を置きます。タブのコンテンツごとに繰り返す必要はありません。

<div class="container">
    <div class='topbar'>
        <ul>
            <li class="short btn-off">Short</li>
            <li class="tall btn-off">Tall</li>
        </ul>
    </div>

    <div class="tall-content">
        <div>
            Tall Content
        </div>  
    </div>

    <div class="short-content">
        <div>
            Short Content
        </div> 
    </div>

    <div id='form-bg'></div>
</div>

また、アニメーションアルゴリズムを上書きし、最初にアニメーションなしで他のアルゴリズムを非表示にしてから、現在のアニメーションをフェードアニメーションで表示します。

$(".short").click(function(){
    $('.tall-content').hide();
    $("#form-bg").animate({height:100},200);
    $('.short-content').fadeIn();
});

$(".tall").click(function(){
    $('.short-content').hide();
    $("#form-bg").animate({height:200},200);
    $('.tall-content').fadeIn();
});

Answer 3

これを追加overflow:hiddenすると、参照しているジャンプも停止します