jQueryスケールdivの内容（ネストされたdiv）

Question

青いボックスを赤色のボックスに合わせるにはどうすればよいですか？ （jQueryの-UIを使用して）

http://jsfiddle.net/Y54EB/1/

これは基本的なコード、CSSです：

#outer { 
    position:relative; 
    height:100px; 
    width:150px; 
    z-index:1; 
    background:#F00; 
} 
#nested { 
    position:absolute; 
    left:50px; top:20px; 
    width:50px; height:20px; 
    z-index:2; 
    background:#00F; 
    cursor:pointer; 
} 

そしてHTML：

<div id="outer"> 
<div id="nested" onclick="$('#outer').effect('scale', {scale:'content',percent:50}, 1000);" /> 
</div> 

Answer 1

私はこれが古いことを認識していますが、正しく理解すれば、私は同じことを達成しようとしていて、仕事をしているこのjQueryプラグインを見つけました：

https://github.com/heygrady/transform/wiki

Answer 2

jqueryの：

$('#outer, #nested').effect('scale', {scale:'content',percent:50}, 1000); 

場合あなたもしたいO、ネストされた青色のボックスの位置を変更するCSSで固定ピクセルポジショニングを使用していけない...％

Answer 3

チェックこのフィドル使用：http://jsfiddle.net/techfoobar/Y54EB/4/

ソリューションは％w.r.t.で寸法やネストされたdiv要素の位置を指定するには、基本的にピクセルではなく親です。

Answer 4

代わりに割合を使用するようにCSSを変更します。

#nested { 
    position:absolute; 
    left:30%; top:20%; 
    width:50%; height:20%; 
    z-index:2; 
    background:#00F; 
    cursor:pointer; 
} 

をこの方法で#nested div要素がouterのdivに比例して常にある - また、ここでは例の作業その位置

を保つ - >http://jsfiddle.net/Y54EB/5/