jQuery scale div содержимое (вложенный div)

Как я могу получить синюю шкатулку с красным цветом? (С помощью JQuery-UI)jQuery scale div содержимое (вложенный div)

Это базовый код, 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>

источник

2012-02-09 julifos

im not sure you mean scale both ... Я думаю, вы хотите, чтобы положение тоже изменилось? – ManseUK

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

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

источник

2012-05-18 17:30:07 james

Это абсолютно мой любимый ответ ;-) Проектирование с использованием процентов не кажется для меня хорошей идеей, поскольку мне нужны вещи, где они должны быть расположены, и я не могу тратить время на вычисления, например 42,748%. Этот материал преобразования делает все это, так как вы масштабируете вещи в приложении для дизайна (в строке). Ницца! – julifos

JQuery:

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

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

источник

2012-02-09 10:40:13 ggzone

.effect() использует jquery-ui, а не только jquery (как говорится в первой строке этого ответа). Просто хотел дать всем головы вверх =) – Losbear

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

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

источник

2012-02-09 10:41:43 techfoobar

OMG! Это приятное решение, но у меня есть много разных элементов внутри div, это будет ничья, рассчитанная на все проценты. Таким образом, jQuery не может масштабировать элементы с фиксированной позицией? – julifos

Да, это возможно. Но если вам нужно, чтобы вложенные элементы изменялись в качестве родительских анимированных (например, размер и положение дочерних элементов с анимацией родителя) до меньшего/большего размера, вам нужно использовать решение на основе CSS. Если его ok для размера детей после того, как родитель закончил анимацию, вы можете пойти для решения на основе jquery. – techfoobar

Я хочу, чтобы все масштабировалось одновременно, как блок, несмотря на то, что его позиция равна px или%. На самом деле, я долгое время разработчик флеш-памяти, борющийся с моим мозгом с помощью js + css ;-) BTW, теперь я делаю свои элементы независимыми (вместо того, чтобы быть дочерними родителями div) и каждый раз аниматизировал каждый, что кажется более согласованный ... – julifos

Изменение CSS, чтобы использовать проценты вместо:

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

Таким образом #nested ДИВ всегда пропорционально outer DIV - также поддерживает позиционирование

Рабочий пример здесь ->http://jsfiddle.net/Y54EB/5/

источник

2012-02-09 10:42:46 ManseUK

jQuery scale div содержимое (вложенный div)

ответ

Смежные вопросы