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

Немного теории

Использовать мы будем замечательный метод animate(), который и делает все фокусы, синтаксис выглядит следующим образом: animate({property list}, speed, [fn]) – анимирует объект согласно заданным свойствам в property list, за время speed, и после этого вызовет функцию [fn] один раз.

speed – может принимать либо строковый параметр: slow, normal, fast, либо значение в миллисекундах

[fn] – не обязательный параметр

Практический пример

Создадим див и как фон назначим ему картинку и три кнопки к нему:

Свернуть – будет сворачивать див влево

Развернуть – будет разворачивать див вправо

Растянуть – будет растягивать див на 20px в высоту при каждом клике.

<input type="button" value="Свернуть" onclick="$('div.container').animate({'width':'0px'},'slow');">
<input type="button" value="Развернуть" onclick="$('div.container').animate({'width':'604px'},'slow');">
<input type="button" value="Растянуть" onclick="$('div.container').animate({'height':'+=20px'},'slow');">
<div class="container"></div>

Смотрим пример jquery анимации, или сразу качаем скрипт анимации.