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

Basics:

show()

возвращает: jQuery
Отображает каждый из элементов набора, если они были скрыты через вызов hide() или через display:none в таблице стилей. Действует подобно show(speed,[callback]), только без анимационных эффектов. Если элемент не был скрыт, то ничего не происходит.

Показываем все параграфы, которые были скрыты.

$("p").show();

Откройте пример в отдельном окне и посмотрите исходный код.

show(speed, [callback])

возвращает: jQuery
Отображает все элементы набора с использованием анимационных эффектов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Высота, ширина и прозрачность каждого элемента набора может быть изменена динамически, с определенной скоростью.

Показываем все скрытые параграфы. Используем в качестве параметра ключевое слово 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);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргумент speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
Аргумент callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.

hide()

возвращает: jQuery
Скрывает каждый из элементов набора, если они отображались. Действует подобно hide(speed, [callback]), но без анимационных эффектов. Если элемент был скрыт – ничего не происходит.
В примере один параграф скрыт изначально, второй – скрывается кликом по ссылке.

$("p").hide();
$("a").click(function () {
  $(this).hide();
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

hide(speed, [callback])

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

Скрываем все видимые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.

$("button").click(function () {
  $("p").hide("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Кликом по кнопке Hide, скрываем все элементы span по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.

$("#hidr").click(function () {
  $("span:last-child").hide("fast", function () {
    // use callee so don't have to name the function
    $(this).prev().hide("fast", arguments.callee);
  });
});
$("#showr").click(function () {
  $("span").show(2000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Скрываем элементы div по клику на них в течение 2 секунд и когда элемент уже скрыт, удаляем его. Попробуйте очень быстро покликать по div’ам.

for (var i = 0; i < 5; i++) {
  $("<div>").appendTo(document.body);
}
$("div").click(function () {
  $(this).hide(2000, function () {
    $(this).remove();
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргумент speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
Аргумент callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.

toggle()

возвращает: jQuery
Переключает отображение каждого из элементов набора. Если они были скрыты – отображает их и наоборот.

Переключаем параграфы с помощью кнопки.

$("button").click(function () {
  $("p").toggle();
});

Откройте пример в отдельном окне и посмотрите исходный код.

Sliding:

slideDown(speed, [callback])

возвращает: jQuery
Открывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.

Открываем все элементы input, используя эффект «скольжения вниз». Время анимации 1000 мс. Как только анимация выполнена – вызывается функция, которая изменяет некоторые css-свойства элементов input. А в особенности среднего элемента, которому передается фокус.

$("div").click(function () {
  $(this).css({ borderStyle:"inset", cursor:"wait" });
  $("input").slideDown(1000,function(){
    $(this).css("border", "2px red inset")
           .filter(".middle")
           .css("background", "yellow")
           .focus();
    $("div").css("visibility", "hidden");
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Открываем, «скользя вниз», все элементы div. Для задания времени используем ключевое слово «slow», т.е. открываем медленно.

$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").slideDown("slow");
  } else {
    $("div").hide();
  }
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideDown принимает те же аргументы, что и show или hide.

slideUp(speed, [callback])

возвращает: jQuery
Скрывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.

Скрываем все параграфы, используя эффект «скольжения вверх». Время анимации 2000 мс. Как только анимация выполнена – вызывается функция, которая покажет сообщение о том, какой именно параграф был скрыт.

$("button").click(function () {
  $(this).parent().slideUp("slow", function () {
    $("#msg").text($("button", this)
    .text() + " - сделано!");
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Скрываем, «скользя вверх», все элементы div. Время не задаем. По умолчанию эффект будет выполнен примерно за 400 мс.

$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").show("slow");
  } else {
    $("div").slideUp();
  }
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideUp принимает те же аргументы, что и show или hide.

slideToggle(speed, [callback])

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

Скрываем и отображаем все параграфы.

$("button").click(function () {
  $("p").slideToggle("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Анимируем элементы div, находящиеся между разделителями.

$("button").click(function () {
  $("div:not(.still)").slideToggle("slow", function () {
    var n = parseInt($("span").text(), 10);
    $("span").text(n + 1);
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideToggle принимает те же аргументы, что и show или hide.

Fading:

fadeIn(speed, [callback])

возвращает: jQuery
Делает видимыми все элементы набора, используя изменение прозрачности элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому «проявляемый» элемент уже должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

«Проявляем» скрытые элементы div один за другим, каждый раз анимационный эффект занимает время примерно в 600 мс.

$(document.body).click(function () {
  $("div:hidden:first").fadeIn("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

«Проявляем» красный блок поверх текста. По завершении этой анимации запускается следующий эффект, который «проявляет» тэг span.

$("a").click(function () {
  $("div").fadeIn(3000, function () {
    $("span").fadeIn(100);
  });
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeIn принимает те же аргументы, что и show или hide.

fadeOut(speed, [callback])

возвращает: jQuery
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания»). Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

Скрываем все параграфы, используя эффект «затухания». Продолжительность эффекта примерно 600 мс.

$("p").click(function () {
  $("p").fadeOut("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Проведите мышью над текстом. Кликните там, где при наведении курсора появится желтый бэкграунд. Это один из нескольких элементов span. По клику на нем он будет скрыт с использованием эффекта «затухания».

$("span").click(function () {
  $(this).fadeOut(1000, function () {
    $("div").text("'" + $(this).text() + "' has faded!");
    $(this).remove();
  });
});
$("span").hover(function () {
    $(this).addClass("hilite");
  }, function () {
    $(this).removeClass("hilite");
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeOut принимает те же аргументы, что и show или hide.

fadeTo(speed, opacity, [callback])

возвращает: jQuery
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания») до величины, указанной во втором аргументе. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

Кликом на первом параграфе изменяем его прозрачность до 0.33. Эффект длится примерно 600 мс. Второй параграф не меняет прозрачность.

$("p:first").click(function () {
  $(this).fadeTo("slow", 0.33);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Меняем прозрачность элементов div случайным образом. Длительность эффекта примерно 200 мс.

$("div").click(function () {
  $(this).fadeTo("fast", Math.random());
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeTo принимает те же аргументы, что и show или hide. И кроме того второй аргумент opacity – число от 0 до 1, характеризующий «целевую» прозрачность элемента.

Custom:

animate(params, [duration], [easing], [callback])

возвращает: jQuery
Это функция для построения своей, пользовательской анимации. У этой функции один обязательный аргумент, представляющий собой объект состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», or «opacity»).

Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).

В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние.

Обратите внимание, что поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или «hide», «show», «toggle»). Например backgroundColor не поддерживается.

Начиная с версии jQuery 1.2 можно определять значения свойств, используя «em» или %. Также начиная с версии jQuery 1.2 можно использовать «относительную» анимацию, т.е. определять значения соответствующего свойства относительно его текущей позиции (используя «+=» или «-=») чтобы передвигать элемент в положительную или отрицательную стороны.
Кликните по кнопке, чтобы запустить анимацию для элемента 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");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы, принимаемые этой функцией:
params – набор атрибутов стилей, которые Вы хотите анимировать.
duration (Optional) – строка, представляющая собой ключевое слово («slow», «normal», или «fast») или число, указываюее длительность эффекта в миллисекундах.
easing (Optional) – строка, представляющая собой имя эффекта плагина easing. Имеет два встроенных значения «linear» и «swing». Используется только с плагином.
callback (Optional) – функция, которая может быть вызвана по завершении анимации каждого элемента набора.

animate(params, options)

возвращает: jQuery
Это функция для построения своей, пользовательской анимации. Аргумент params представляет собой объект, состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», или «opacity»).

Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).

В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние. Или же если значение представлено в виде строки («hide», «show», или «toggle»), анимация для этого свойства будет создана со значениями по умолчанию.
Отдельно стоит поговорить об аргументе options. В нем также может быть передана длительность соответствующего эффекта анимации (как с использованием числовых значений в миллисекундах, так и с помощью клюючевых слов). Также может быть использовано имя эффекта при использовании плагина easing. С помощью опции complete может быть вызвана функция, которая будет выполнена по завершении анимации для каждого элемента набора.
Обязательно надо упомянуть о queue (добавлено в jQuery 1.2). Он принимает значения true (по умолчанию) или false. Если установить queue:false, это даст возможность выполнить анимационный эффект вне очереди, параллельно со следующим эффектом (если такой есть конечно).

Посмотрите следующий пример – будет намного понятнее.
Первая кнопка как раз демонстрирует пример такой параллельной анимации. Некий элемент с идентификатором #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();
});
$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

Откройте пример в отдельном окне и посмотрите исходный код.

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()

возвращает: 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);
});

Откройте пример в отдельном окне и посмотрите исходный код.

В общем про анимационные эффекты библиотеки jQuery вроде бы все.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal