Путешествие объектов в пространстве

Когда верстаешь меню, эта техника используется каждым. Компановка блоков с перемещением, прыгающие квадратики, кружочки и т. п., все требует хорошо отточеной техники. Техники перемещения объектов на странице.

Сегодня мы расберем возможные варианты перемещения блоков. Но для начала пример:

Когда верстаешь выпадающее меню, большинство из вас используют технику при помощи css. Чтобы понять как это устроено, вам поможет следующий пример:

Слева пример, когда курсор не наведен. Справа — наведен. Заметьте, что в левом случае, мы используем left со очень большим значением, и как правило со знаком «-«. И получается блок за пределами экрана. А когда наводим курсор на ссылку, появляется выпадающее меню. Появляется — это значит left со значением «0».

Такой вариант будет действовать только с css, когда используе jQuery, то бдет совсем по другому. Мы плавно будем проявлять высоту. Об этом я писал ранее.

Теперь мы рассмотрим пример перемещения блоков при помощи jQuery. Изначально представим в голове что происходит с кодом. И так:
Имеется блок с параметрами: position:absolute, и каким-то положением (left, top, bottom, right) либо без этого. Теперь мы должны узнать, будем мы использовать существующее положение, либо нет. Когда есть заданное положение или мы просто его учитываем (оно не прописано в css, но оно ведь есть), мы прибавляем к существующему значению, еще одно значение, либо вычитаем. Пример:

$("#block").animate({left:'+=240px'}, 500);

К существующему положени по горизонтали от левого края, мы прибавляем значение 240. Значит если у нас было left равное 300px, то станет 540px.

$("#block").animate({left:'-=240px'}, 500);

От существующего положения по горизонтали от левого края, мы отнимаем значение 240. Значит если у нас было left равное 300px, то станет 100px.

Посмотрите эти два варианта на примере:

В принципе мы пришли к завершению.. Только стоит отметить, что когда мы делаем другие ориентировки положения (top, right, bottom), то используется такая техника. Только left заменяем на свой ориентир. Пример:


$("#block").animate({top:'+=240px'}, 500);
$("#block").animate({right:'+=240px'}, 500);
$("#block").animate({bottom:'+=240px'}, 500);


Когда нужно не прибавление, к существующему значению, а вычитание, то мы заменяем «+» на «-«.

Теперь другой вариант, мы не будем учитывать существующее положение, тогда нам некчему прибавлять или вычитать какое-то значение, мы просто задаем его. То есть, вот наглядный пример:


$("#block").animate({bottom:'240px'}, 500);


Как видите, мы просто убрали «+=», а оставили только значение.
Однако при повторном вызове функции оно не будет изеняться, а останется таким же. Пример:

Мы рассмотрели возможные варианты перемещения блоков. Причем как при помощи css, так и расширенной анимации на jQuery. Надеюсь я вас никак не запутал, если что, комментарии умесны.

[Изменения 17 октября 2009]
Вы уж извините меня, но я забыл про такую важную вещь. Где же можно использоваться выше приведенные примеры.

Начнем с простого и важного. Выпадающее css меню.
Продолжем мы с примеров чуть по сложнее. При помощи jQuery. Что сразу могу вам показать, так это слайд-панель, сделана она такой техникой.