Сегодня хочу познакомить Вас с замечательной библиотекой JavaScript — Jquery. jQuery — JavaScript-фреймворк, фокусирующийся на взаимодействии JavaScript и HTML.
С помощью данной библиотеки Вы можете сделать почти что угодно! Это и Ajax, и динамическое перемещение объектов..

Итак, проведем знакомство с jquery!
jquery подключается как один JavaScript-файл:

<script language = "javascript" src="jQuery.js"></script>

Сегодня хочу познакомить Вас с тем, как можно двигать объекты по окну браузера с использованием jQuery

Во-первых создадим сам объект, пусть это будет обычный :

<div id="box"></div>

И применим к нему несколько css стилей:

<style type="text/css">
#box {
    background: #6699FF;
    height: 100px;
    width: 100px;
    position: relative;
}
</style>

В результате квадрат 100 на 100 синего цвета с переменчивым положением.
Затем подключаем библиотеку jquery, например так:

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

Можно сделать кнопку, ко нажатию которой будет исполняться код:

<input type="button" class="run" value = "Run!" />

Теперь переходим к самому интересному — программной части

<script type="text/javascript">
$(document).ready(function(){
   $(".run").click(function(){ //если наша кнопка нажата
      $("#box").animate({opacity: "1", top: "+=500" }, 1200); //Прозрачность - 1 (т.е.
//непрозрачный), изменение положения по вертикали - смещение на 500 пх вниз
      $("#box").animate({opacity: "1", left: "+=500"}, "fast", 1200); //почти аналогично первому,
//смещение по горизонтали - 500 пх вправо
      $("#box").animate({opacity: "1", top: "-=500"}, "fast", 1200);
      $("#box").animate({opacity: "1", left: "-=500"}, "fast", 1200);
      $('#box').css({background: "#FF9922"}); //редактирование стилей css объекта box
      $("#box").animate({top: "0"}, "fast"); //возвращение box на место
      $("#box").slideUp(); //тут мы как бы "сжимаем" наш объект
      $("#box").slideDown("slow"); //а тут опять возвращаем в исходное состояние
      return false;
   });
});
</script>

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

Если подробнее о функции animate();
animate(params, speed, easing, callback);
Где:
params – свойства, которые участвуют в анимации в виде пар {ключ: значение}. Например: {height: «show»} или {opacity: 50, width: 100, height: 200}.
speed – скорость в миллисекундах.
easing – замедлениие анимации (замедляется ли к концу, «easein», или, наоборот, ускоряется, «easeout». Дополнительные типы доступны в модулях расширения).
callback – функция, которая будет вызвана после завершения анимации.