2

こんな状況です...

HTML:

   <div id="cw">
        <div id="c"></div>        
   </div>
   <a href="#">click me</a>

CSS:

#cw {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px 200px 0 200px;     
    padding: 10px;
}

#c {
    background: blue;
    display: block;
    height: 200px;
    width: 200px;    
}

-> http://jsfiddle.net/F6FF2/4/

今、私が達成しようとしているのはこれです。「クリックしてください」リンクがクリックされた場合、内部コンテナー#cは、ページ上でレンダリングされた場所からウィンドウ全体に拡張されるはずです。

position: absoluteこれは、要素に割り当てることによってのみ達成できると考えました。しかし、その親が相対的に配置されているという問題に遭遇します。

だから私がこれまでに思いついたのは#c、クローンを作成し、それをDOMから削除し、bodyその展開をアニメーション化する前にクローンをに追加することで、望ましい結果が得られます。ただし、問題は、#cたとえば Google マップが含まれている場合、(単にタイルを更新するのではなく) 複製イベントの後にマップを再インスタンス化する必要があることです。

このソリューションがかなり面倒に見えるという事実は別として。より良い、よりクリーンなソリューションが必要です。

何か案は？

4

2 に答える 2

1

ここでコンテンツ（マップ）を上書きしています：

c.text(c_width+" > "+c_height+" > "+c_left+" > "+c_top);

コンテンツを上書きしないでください。また、クローンを使用しないでください (オリジナルを移動します)。アニメーションを終了するときに、代わりにサイズ変更イベントをトリガーします。

http://jsfiddle.net/F6FF2/10/

于 2012-05-24T10:28:13.193 に答える
0

div を複製する代わりに body 要素に移動しようとしましたか?

$("body").append($("#c"))

完了したら、元に戻すことができます。

$("#cw").append($("#c"))
于 2012-05-24T10:15:07.793 に答える