12

これが以前に対処されていて、何も見つからなかった場合はご容赦ください。

子が (負のマージンを介して) その外側に絶対に配置されているコンテンツ バーをアニメーション化しています。アイデアは、バーが拡大するにつれて、子供たちがバーと一緒にアニメーション化するということです。

アニメーションが開始されるとすぐに子が消え、アニメーションが完了すると再び表示されます。ブラウザが子を配置する場所を認識する前に、アニメーションを完了する必要があるかのようです。

ここに非常に簡単な例をアップロードしました。すべてのスクリプトはページに含まれています: http://www.ismailshallis.com/jdemo/

実際に何が起こっているのですか？これを回避するためのオプションは何ですか?

よろしくお願いします。

ベリンダ

4

4 に答える 4

12

jquery が要素の高さまたは幅のいずれかをアニメーション化する場合、アニメーションの発生中に要素に自動的に設定さoverflow: hiddenれます。子要素は外側に配置されているため、技術的にはオーバーフローの一部です。これを行うコードの近くにあるjqueryソースのコメントには、「//何もこっそり出ないようにしてください」と書かれています。圧縮されていない jquery ソースを含め、jquery-1.3.2.js の 4032 行目 (関数内) をコメントアウトするanimate場合:

//this.style.overflow = "hidden";

アニメーションが意図したとおりに動作することがわかります。上記の行をコメントアウトしてjqueryソースを変更する以外の回避策はわかりません。

于 2009-07-06T03:35:05.047 に答える
7

jQuery 1.4.3 の時点で、jQuery の変更を必要としない別のソリューションがあります。アニメーションを開始する前に、アニメーション化する要素の「オーバーフロー」スタイルをインライン スタイルとして設定すると、jQuery は「オーバーフロー」スタイルを非表示に設定しません。例えば：

<script type="text/javascript">
    $(document).ready(function() {
        $("#box a").click(function() {
            $("#box")

            // Prevents absolutely positioned elements from getting clipped.
            .css('overflow', 'visible')

            .animate({
                height: "410px"
            })

            // Reset the 'overflow' style.  You could also put this in the 
            // animate() callback.
            .css('overflow', '');
        });
    });
</script>
于 2010-11-17T21:16:36.310 に答える
1

まあ、それはブラウザや jQuery の機能のようで、必ずしも HTML や Javascript を構築した方法とは関係ありません。DOM要素の境界ボックス内のピクセル領域のみがレンダリングされているように見えるため、これを言います（テキストの半分が外側になり、半分が内側になるようにテキストを移動してみてください...「切り取られた」部分が表示されますアニメーション化されたテキストの。)

回避策は次のとおりです。「#box」と「#outside」の周りにラッパー DIV を使用して、両方がラッパーのバウンディング ボックスの内側になるようにします。

CSS:

    #boxWrapper {
        position: fixed;
        top: 50%;
        left:  50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -120px; /* extra 20px for the #outside */
        background:#ccc;
    }

    #box {
        background: #000;
        height:100%;
        width:100%;
        margin-top:20px; /* give 20px for the #outside */
    }

    #outside {
        background:darkblue;
        position: absolute;
        top: 0px;
        right: 0; }

そしてHTML：

<div id="boxWrapper">
    <div id="box">
        <a href="#">CLICK ME</a>
        <div id="outside">
            I'm positioned OUTSIDE the box
        </div>
    </div>
</div>

そしてJavascript：

<script type="text/javascript">
    $(document).ready(function() {

            $("#box a").click(function(){
                $("#boxWrapper").animate({ 
                        height: "410px",
                        opacity: 0.9,
                        top: "25%"
                      }, 1000 );
                return false;
            });
        }); 

</script>
于 2009-07-06T03:47:26.660 に答える