この特定のページの不具合は、ie6とie7を除くすべてのブラウザで見られることに注意してください。 したがって、「コードを実行」ボタンをクリックすると、「p.neat」ブロックが高さおよび幅がゼロの透明な状態からこの状態までスムーズに表示されます。
その後、ブロックの高さが急激に開いた状態にジャンプします。
ブラウザーが一瞬「スローダウン」したように見えるかもしれませんが、この動作の本当の理由は、jQueryが非表示ブロックの高さを正しく計算しないことです。 しかし、ミュージシャンを急いで撮影しないでください、なぜこれが起こるのかを理解してみましょう。 このグリッチはほとんど常に対処できることを事前に注意します。
最初に、グリッチの出現に関するいくつかの条件の概要を説明します。関数show（speed）、toggle（speed）、slideDown（）およびanimate（{height： 'show '}）。 明らかに、ブロックの開示のアニメーションを作成するには、その高さをゼロからある高さに変更する必要があります。 さらに、この高さはアニメーションの開始前に計算する必要があります。 ご存知のように、HTMLとCSSはブロックを非表示にする2つの方法しか提供しません;これらは表示：なしと可視性：隠しプロパティです。 前者の場合、要素はページのソーステキストにないかのように単純にオフになります。 同時に、ブラウザはブロックが占有するスペースを計算するようなことを気にしませんし、ブロックの高さを見つけることは単に不可能です。 可視性：隠しモードでは、ブラウザはブロックが存在するふりをし、ページ上にブロックを割り当てるが、単にそれを描画しません。 このモードでは、ユーザーにブロックを表示せずに、その寸法を調べることができます。 しかし、ユーザーからブロックを隠すだけでは十分ではありません。ページ上のスペースを占有する必要があります。ここで、position：absoluteプロパティがシーンに表示され、高さを取得する前にブロックに適用されます。 アニメーションの最後のブロックの高さと実際の高さとの差は、ブロックの高さと位置の違いにすぎません：静的および位置：絶対。
ブラウザでオブジェクトインスペクタを有効にし、プロパティ「style = "display：block; position：absolute;" "を拡張可能ブロックに追加すると、次の図が表示されます。
jQueryがブロックを拡張するのはこの高さまでです。 さて、このバグを修正してみましょう。 ご存じのように、position：absoluteの要素の幅は、特に指定がない限り、position≠staticの最も近い親の幅によって制限されます。 この場合、要素の幅を直接の親の幅と同じにする必要があります。この親に従って、position：relativeを設定する必要があります。 再度、オブジェクトインスペクターを選択し、ページをリロードし、position：relativeプロパティを「div.jq-codeDemo」要素に追加して、「コードを実行」ボタンをクリックします。 やった！ 最も人気のあるJavaScriptフレームワークのメインページで1つのプロパティを持つアニメーションを修正しました。
もちろん、jQueryサイトの開発者に感謝したいのは、私の記事のこのような単純な例を作成してくれたことです。 実際の状況では、何か他のことをしなければならない場合があります。 一般に、インスペクタに表示されるブロックを常にチェックして、静的から絶対に位置を変更し、ブロックサイズが変更されていないことを確認する必要があります。 ただし、インスペクターの前にチェックする必要がある特定のルールを特定することもできます。
- 拡張可能ブロックのハードサイズを指定できる場合は、指定します。 そして、次のルールは読むことができません。
- サイズを親ブロックの割合にする必要がある場合は、位置が≠staticの最も近い親が、オブジェクトの直接の親と同じサイズであることを確認する必要があります。 そうでない場合は、position：を直接の親に対して相対的に配置できます。 さらに、サイズを親の100％にする必要がある場合は、これを明示的に示すことをお勧めします。
- 位置≠静的の親には、水平方向のパディングを使用しないでください。 これは、通常の要素の場合、パディングを考慮せずに親からブロックの幅が考慮されるという事実と、位置：絶対、考慮される要素の場合です。
- アニメーションの開始後（つまり、jQueryが高さを計算した瞬間）、親またはアニメーション化されたオブジェクトの幅または高さに影響を与える可能性のあるプロパティを変更することはできません。
実際、それはすべて、あなたにとってスムーズなアニメーションです、友人。 おそらく次回は、保留中のマウスイベントなど、それらがいつ役立つかについて説明します。