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

Проверьте эту скрипку: http://jsfiddle.net/techfoobar/Y54EB/4/

Решение заключается в том, чтобы указать размеры и положение вложенного div в% w.r.t. родительский, чем в пикселях.

Answer 2

Я понимаю, что это старый, но если я вас правильно понимаю, я пытался добиться того же и наткнулся на этот плагин jQuery, который выполняет эту работу:

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

Answer 3

Измените свой 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/

Answer 4

jquery:

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

, если вы хотите также переместить вложенное синее поле, не используйте фиксированное позиционирование пикселей в CSS ... используйте%