Как реализовать так, чтобы при наведении на 1 элемент остальные сдвигались тоже?

Question

[Дима Паутов]

Суть такая, у меня есть 7 блоков абсолютно позиционированных. Каждому в стилях задано четкое позиционирование в px.
Пример кода на всякий:

<section id="portfolio">
<figure id="item1"></figure>
<figure id="item2"></figure>
<figure id="item3"></figure>
<figure id="item4"></figure>
<figure id="item5"></figure>
<figure id="item6"></figure>
<figure id="item7"></figure>
</section>

Мне нужно при наведении на 1 любой блок, чутка сдвигать остальные, как бы разлетались в стороны(можно рандомно, можно и просто на n px). Если есть готовые примеры, скиньте пожалуйста.

Comments

[Rad1calDreamer]

Сделайте пример верстки на jsfiddle.net

Answer 1

[Александр Таратин]

jsfiddle.net/QW01_01/drkg9mpb/1

Answer 2

[Rad1calDreamer]

анимировать другие можно так.

$('#portfolio').on('hover','figure', function(){
    $("#portfolio figure").not(this).stop().animate({top: y, left:x});
})

x и y вставляйте свои. Можно случайные. Назад они должны прилетать потом или нет? Должны ли пересекатьсья с друг другом?

Comments

[Дима Паутов]

Назад да, насчет пересечений, ну... не желательно))

[Rad1calDreamer]

Сверстайте на фидле пример

[Дима Паутов]

jsfiddle.net/drkg9mpb

Answer 3

[melnikov_m]

Вставлю свои 5 копеек, в animate можно вставлять функции плавности. Чтобы анимация проходила по определенной формуле. Усиливает эффект, получается красиво. easings.net/ru

Answer 4

[Алексей Колосов]

Это должно решаться на уровне CSS, никак не на уровне JS

Comments

[Дима Паутов]

наведите мне на 1 блок, а потом сдвиньте остальные в рандомном порядке на css