jQueryの - 点滅 - 絶対にそれの外側に位置する子を持つ要素をアニメーション化

StackOverflow https://stackoverflow.com/questions/1085206

質問

これは以前に対処されている場合は、

何かを見つけることができなかった、私を許しています。

私はそれが（負のマージンを経由して）絶対にそれの外側に位置する子を持つコンテンツバーをアニメーション化しています。アイデアは、それが膨張する子どもたちがバーでアニメーション化することである。

何が起こるかというと、すぐにアニメーションが子供たちが消えて起動し、アニメーションが完了したときに再表示されています。アニメーションは、ブラウザがどこ子供を置くことを知っている前に完了する必要があるかのようです。

私は本当に簡単な例ここにアップロードしている、すべてのスクリプトがページに含ま： http://www.ismailshallis.com/jdemo/する

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

事前に多くのおかげで、

ベリンダ

役に立ちましたか？

解決

jQueryの要素の高さまたは幅のいずれかをアニメーション化されると、アニメーションが起こっている間に

は、自動的に要素にoverflow: hiddenを設定します。あなたの子要素が外側に位置しているので、それは技術的にオーバーフローの一部です。これを実行するコードの近くにjqueryのソース内のコメントは「//は必ず何が出て潜入しないようにしてください。」と言いますあなたが圧縮されていないjqueryのソースを含めると（animate関数内）のjquery-1.3.2.jsのライン4032をコメントアウトした場合：

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

あなたはアニメーションはあなたが意図したように動作していることがわかります。私は上記のその行をコメントアウトすることにより、jqueryのソースを変更する以外の回避策のかわからない。

他のヒント

は、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>

まあ - 必ずしもあなたがHTMLやJavascriptを構築してきた道の、ブラウザやjQueryの機能だと思われます。私は、あなたが「カットオフ」部分を参照してください... DOM要素のバウンディングボックスの内側のみ画素領域をレンダリングしているように見えるようなので、テキストの半分は外にあるように、テキストを移動してみてください（これを言うと、内側の半分それがアニメーション化、テキストの。）

だからここの仕事は周りです：これは、両方のラッパーのバウンディングボックスの内側にあるような「#box」のラッパーDIVを使用し、「#outside」

。

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>

あるいは、要素がvisible仕様を使用して!importantままであること、あなたの好みを示すことができます。

#box {
  overflow: visible !important;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top