jQuery：DIVのスライドアニメーションのサイズが変更される

DIVでスライドアニメーションを適用しようとしている単純なHTMLページがあります。 DIVは空想何の関係もありませんし、以下に記載する：ボタンをクリックjQuery：DIVのスライドアニメーションのサイズが変更される

<body> 
    <div id="content" style="position:absolute; top: 5%; left: 5%; width:80%; 
           height:70%; color:#333; background:#eaeaea; 
           border:1px solid #333;"> 

      <input type="button" name="buttonId" value="click!"/> 

    </div> 
</body>

が右にDIVをスライドさせるjQueryのアニメーション機能を呼び出します。

$('#content').hide('slide', { direction: 'right' }, 1000); 
    $('#content').show('slide', { direction: 'right' }, 500);

今、私が直面してる問題がありますDIVがスライディングアニメーションを開始すると、その高さがはっきり「圧迫」しています。アニメーションが完了すると、DIVは実際の高さを回復します。しかし、アニメーションを通して、DIVの高さは短縮されたままです。

pxまたはemのような固定単位を使用してDIVのheight属性を設定すると、そのような圧迫はないこともわかりました。歪みは、高さが%に設定されている場合にのみ発生します。

誰かが原因を教えてもらえますか？

ありがとうございました。

出典

2011-09-15 anirvan

すでに問題の解決方法があります。スライドアニメーションを呼び出す前に要素の外側の幅を取得し、ピクセルに設定します。コールバックを関数に追加し、エフェクトのアニメーション化が完了したらパーセント値に戻します。

私はその圧迫理由を知らない。

出典

2011-09-15 13:08:25 Drake

正しいです。しかし、私の質問は理解のためにもっと理解しています**なぜ**これはこのようなものですか？ – anirvan

jQuery：DIVのスライドアニメーションのサイズが変更される

答えて

関連する問題