LOGO JQuery
jQuery API: Эффекты анимация
jQuery имеет ряд функций, выполняющих анимационные эффекты с элементами страницы. Начиная от простых возможностей: скрытия, появления, перемещения элементов, библиотека позволит создавать свои, более сложные эффекты, основанные на изменении CSS свойств.

Эти изменения могут происходить плавно или мгновенно, замедляться, ускоряться или выполняться равномерно.

Стандартные анимации

.show() .hide()

Мгновенно показывает/скрывает выбранные элементы, установив их css-свойство display в none, не изменяя при этом их прозрачность и размеры.

.show(duration,[callback]) .hide(duration,[callback])

duration — продолжительность выполнения анимации (появления или скрытия).

Может быть задана в миллисекундах (200 и 600 миллисекунд)

Может быть задана строковым значением 'fast' или 'slow'.

Если этот параметр не задан, анимация будет происходить мгновенно, элемент просто появится/исчезнет

callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия).

.show([duration],[easing],[callback]) .hide([duration],[easing],[callback])

easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится).

jQuery доступны лишь две такие функции: 'linear' и 'swing'
(для равномерной анимации и анимации с ускорением)

Другие варианты можно найти в плагинах, например, jQuery UI предоставляет более 30 новых динамик.

Показываем все скрытые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.
$("button").click(function () {
  
  $("p").show("slow");
  
});
Откройте пример в новом окне и посмотрите исходный код

Показываем все скрытые элементы div по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.
$("#showr").click(function () {
  $("div:eq(0)").show("fast", function () {
    // use callee so don't have to name the function
    $(this).next().show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("div").hide(2000);
});
Откройте пример в новом окне и посмотрите исходный код

Скрываем элементы div по клику на них в течение 2 секунд и когда элемент уже скрыт, удаляем его. Попробуйте очень быстро покликать по div'ам.
for (var i = 0; i < 5; i++) {
  $("<div>;").appendTo(document.body);
}
$("div").click(function () {
  $(this).hide(2000, function () {
    $(this).remove();
  });
});
Откройте пример в новом окне и посмотрите исходный код

.slideDown([duration],[easing],[callback]) .slideUp([duration],[easing],[callback])

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

Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно.

Открываем, "скользя вниз", все элементы div. Для задания времени используем ключевое слово "slow", т.е. открываем медленно.
$(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
 });
Откройте пример в новом окне и посмотрите исходный код

Скрываем все параграфы, используя эффект "скольжения вверх".
Время анимации 2000 мс.
Как только анимация выполнена - вызывается функция, которая покажет сообщение о том, какой именно параграф был скрыт.
$("button").click(function () {
  $(this).parent().slideUp("slow", function () {
    $("#msg").text($("button", this)
    	.text() + " - сделано!");
  });
});
Откройте пример в новом окне и посмотрите исходный код

.slideToggle([duration],[easing],[callback])

Вызов этого метода приводит к плавному сворачиванию (если элемент развернут) или разворачиванию (если элемент свернут) выбранных элементов на странице.

Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно.
// свернет/развернет элемент с идентификатором leftFit за 400 мс.
$("#leftFit").slideToggle();	
// в течении 1/3 секунды свернет/развернет элемент с идентификатором leftFit.
$("#leftFit").slideToggle(300);	
// в течении 600 мс свернет/развернет элемент с идентификатором leftFit.
$("#leftFit").slideToggle("slow");
При нажатии на кнопку элемент с картинкой и текстом будет поочередно сворачиваться и разворачиваться:
$("button").click(function () {
      $("div").slideToggle("slow");
});
Откройте пример в новом окне и посмотрите исходный код

.fadeIn([duration],[easing],[callback]) .fadeOut([duration],[easing],[callback])

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

Отметим, что после скрытия элемента, его css-свойство display автоматически становится равным none, а перед появлением, оно получает свое прежнее значение обратно.

"Проявляем" скрытые элементы div один за другим, каждый раз анимационный эффект занимает время примерно в 600 мс.
$(document.body).click(function () {
  
  $("div:hidden:first").fadeIn("slow");
  
});
Откройте пример в новом окне и посмотрите исходный код

"Проявляем" красный блок поверх текста. По завершении этой анимации запускается следующий эффект, который "проявляет" тэг span.
$("a").click(function () {
  
  $("div").fadeIn(3000, function () {
  
    $("span").fadeIn(100);
  
  });
  
  return false;
  
});
Откройте пример в новом окне и посмотрите исходный код

.fadeTo([duration], opacity, [easing], [callback])

Изменяет уровень прозрачности у выбранных элементов на странице. Позволяет менять прозрачность плавно.

fadeTo принимает те же аргументы, что и show или hide.
И кроме того второй аргумент opacity - число от 0 до 1, характеризующий "целевую" прозрачность элемента.
$("p:first").click(function () {
  
  $(this).fadeTo("slow", 0.33);
  
});
Откройте пример в новом окне и посмотрите исходный код

Меняем прозрачность элементов div случайным образом.
Длительность эффекта примерно 200 мс.
$("div").click(function () {
  
  $(this).fadeTo("fast", Math.random());
  
});
Откройте пример в новом окне и посмотрите исходный код

.fadeToggle([duration],[easing],[callback])

Вызов этого метода приводит к плавному исчезновению (если элемент не скрыт) или появлению (если элемент скрыт) выбранных элементов на странице, за счет изменения прозрачности.

Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно.

При нажатии на кнопку элемент с картинкой и текстом будет поочередно появляться и исчезать:
$("button").click(function () {
      $("div").fadeToggle("slow");
});
Откройте пример в новом окне и посмотрите исходный код

Управление анимацией

.animate(properties, [duration], [easing], [callback])

Выполняет заданную пользователем анимацию, с выбранными элементами. Анимация происходит за счет плавного изменения CSS-свойств у элементов.

properties - список CSS-свойств, участвующих в анимации и их конечных значений.

Задается объектом, в формате
css-свойство:значение
Это очень похоже на задание группы параметров в методе .css()
Однако, properties имеет более широкий диапазон типов значений.

Они могут быть заданы не только в виде привычных единиц:
чисел, пикселей, процентов и др.,
но еще и относительно:
{height:"+=30", left:"-=40"} 
Кроме того, можно задавать значения "hide", "show", "toggle", которые скроют, покажут или изменят видимость элемента на противоположную, за счет параметра, к которому они применены.

Скроет div-элементы, за счет уменьшения прозрачности и уменьшения высоты (сворачиванием) элемента.
$('div').animate(
  {
    opacity: "hide",
    height: "hide"
  },
5000);
Отметим, что в параметре properties можно указывать только те css-свойства, которые задаются с помощью числовых значений.
Например, свойство background-color использовать не следует.

Расширенный справочник по .animate()

Кликните по кнопке, чтобы запустить анимацию для элемента div.
$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
Откройте пример в новом окне и посмотрите исходный код

Пример "относительной" анимации. Покликайте несколько раз по кнопкам вправо/влево...
$("#right").click(function(){
  
  $(".block").animate({"left": "+=50px"}, "slow");
  
});
  
$("#left").click(function(){
  
  $(".block").animate({"left": "-=50px"}, "slow");
  
});
Откройте пример в новом окне и посмотрите исходный код

Посмотрите следующий пример - будет намного понятнее.

Первая кнопка как раз демонстрирует пример такой параллельной анимации. Некий элемент с идентификатором #block1 должен изменить свою ширину до 90% от возможной, шрифт должен быть установлен в размер 24px и правая рамка должна стать шириной 15px.

Обратите внимание, что изменение ширины происходит одновременно с другими двумя эффектами, которые уже следуют друг за другом в порядке очереди.

Вторая кнопка запускает почти такую же анимацию, вот только все эффекты следуют друг за другом строго по очереди.
$("#go1").click(function(){
  
  $("#block1").animate( { width:"90%" },
  
             { queue:false, duration:3000 } )
  
    .animate( { fontSize:"24px" }, 1500 )
  
    .animate( { borderRightWidth:"15px" }, 1500);
  
});
  
$("#go2").click(function(){
  
  $("#block2").animate( { width:"90%"}, 1000 )
  
    .animate( { fontSize:"24px" } , 1000 )
  
    .animate( { borderLeftWidth:"15px" }, 1000);
  
});
  
$("#go3").click(function(){
  
  $("#go1").add("#go2").click();
  
});
Откройте пример в новом окне и посмотрите исходный код

.stop()

возвращает: jQuery
Останавливает все выполняющиеся анимационные эффекты для всех элементов набора.

Кликните по кнопке Go, чтобы запустить анимацию.
Затем по кнопке Stop, чтобы ее остановить.
Ну а клик по кнопке Back запустит другой анимационный эффект - блок будет двигаться в обратную сторону.
Заметьте, что отсчет будет вестить от той позиции в которой блок был остановлен.
// Запускаем анимацию
  
$("#go").click(function(){
  
  $(".block").animate({left: '+=100px'}, 2000);
  
});
  
// Останавливаем анимацию
  
$("#stop").click(function(){
  
  $(".block").stop();
  
});
  
// Запускаем в другом направлении
  
$("#back").click(function(){
  
  $(".block").animate({left: '-=100px'}, 2000);
  
});
Откройте пример в новом окне и посмотрите исходный код

.queue()

Расширенный справочник .queue()

возвращает: Array
Возвращает ссылку на очередь элемента (массив функций).

Разберите этот пример. По клику на кнопке мы получаем длину очереди в текущий момент.
$("#show").click(function () {
  
  var n = $("div").queue("fx");
  
  $("span").text("Длина очереди: " + n.length);
  
});
  
function runIt() {
  
  $("div").show("slow");
  
  $("div").animate({left:'+=200'},2000);
  
  $("div").slideToggle(1000);
  
  $("div").slideToggle("fast");
  
  $("div").animate({left:'-=200'},1500);
  
  $("div").hide("slow");
  
  $("div").show(1200);
  
  $("div").slideUp("normal", runIt);
  
}
runIt();
Откройте пример в новом окне и посмотрите исходный код

.queue(callback)

возвращает: jQuery
Добавляет новую функцию, которая долна быть выполнена, в конец очереди для всех элементов набора.

В примере: очередь пользовательских функций.
$(document.body).click(function () {
  
  $("div").show("slow");
  
  $("div").animate({left:'+=200'},2000);
  
  $("div").queue(function () {
  
    $(this).addClass("newcolor");
  
    $(this).dequeue();
  
  });
  
  $("div").animate({left:'-=200'},500);
  
  $("div").queue(function () {
  
    $(this).removeClass("newcolor");
  
    $(this).dequeue();
  
  });
  
  $("div").slideUp();
  
});
Откройте пример в новом окне и посмотрите исходный код

.queue(queue)

возвращает: jQuery
Заменяет очередь для всех элементов набора новой очередью (массив функций).

В примере, по клику на кнопке Stop, устанавливается массив очереди, чтобы удалить текущую очередь. По клику на кнопке Start очередь запускается вновь.
$("#start").click(function () {
  
  $("div").show("slow");
  
  $("div").animate({left:'+=200'},5000);
  
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  
  $("div").animate({left:'-=200'},1500);
  
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });

  $("div").slideUp();
});
  
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});
Откройте пример в новом окне и посмотрите исходный код

.dequeue()

возвращает: jQuery
Удаляет поставленную в конец очереди функцию, разрешая очереди продолжаться.

В примере dequeue используется, чтобы разрешить очереди продолжиться после использования queue(callback). Попробуйте убрать в примере строчку $(this).dequeue(); и Вы обнаружите, что анимация остановится после срабатывания toggleClass.
$("button").click(function () {
  
  $("div").animate({left:'+=200px'}, 2000);
  
  $("div").animate({top:'0px'}, 600);
  
  $("div").queue(function () {
  
    $(this).toggleClass("red");
  
    $(this).dequeue();
  
  });
  
  $("div").animate({left:'10px', top:'30px'}, 700);
  
});
Откройте пример в новом окне и посмотрите исходный код