JavaScript. Подробное руководство, 6-е издание, стр. 314

$("img").fadeIn(500)

 .animate({"width”:"+=100"}, {queue:false, duration:1000})

 .fadeOut(500);

Эффекты, запускаемые методами

fadeIn()

fadeOut(),

будут поставлены в очередь, а эффект, запускаемый вызовом метода

animate()

(эффект изменения значения свойства

width

на протяжении 1000 миллисекунд) - нет. Изменение ширины начнется одновременно с эффектом

fadeIn().

Эффект

fadeOut()

начнется сразу после окончания эффекта

fadeIn():

он не будет ждать, пока завершится эффект, изменяющий ширину элемента.

Функции переходов

В самом простом случае воспроизведение анимационного эффекта заключается в линейном изменении во времени значения свойства. Например, через 100 миллисекунд после начала эффекта, длительность которого составляет 400 миллисекунд, величина изменения значения свойства составит 25%. То есть при линейном изменении свойства

opacity

от 1,0 до 0,0 (как, например, при использовании метода

fadeOut()

) в этот момент оно должно иметь значение 0,75. Однако, как оказывается, визуальные эффекты дают более глубокие впечатления, если они выполняются нелинейно. Поэтому библиотека jQuery предусматривает возможность использования «функции перехода», которая отображает проценты от общего времени выполнения эффекта в проценты от конечного значения свойства. Библиотека jQuery передает функции перехода значение времени в диапазоне от 0 до 1, а она должна вернуть другое значение в диапазоне от 0 до 1, исходя из которого библиотека jQuery вычислит значение CSS-свойства, опираясь на его вычисленное значение. Конечно, в общем случае ожидается, что функции переходов будут возвращать значение 0, когда им передается значение 0, и 1, когда им передается значение 1, но между этими двумя значениями они могут быть нелинейными, что будет проявляться в ускорении и замедлении анимационных эффектов.

По умолчанию в библиотеке jQuery используется синусоидальная функция перехода: эффект сначала протекает медленно, затем ускоряется, и затем опять замедляется при приближении к конечному значению. Функции переходов в библиотеке jQuery имеют имена. Функция по умолчанию называется «swing», а линейная функция называется «linear». Вы можете добавлять свои функции переходов в объект

jQuery.easing

jQuery.easing["squareroot"] = Math.sqrt;

Библиотека jQuery UI и расширение, известное как «the jQuery Easing Plugin», определяют весьма исчерпывающий набор дополнительных функций переходов.

***********************************************

Остальные параметры анимационных эффектов имеют отношение к функциям переходов. Свойство

easing

объекта с параметрами определяет имя функции перехода. По умолчанию библиотека jQuery использует синусоидальную функцию с именем «swing». Если необходимо, чтобы анимационный эффект воспроизводился линейно, следует использовать параметры, как показано ниже:

$("img").animate({"width":"+=100"}, {duration: 500, easing:"linear"});

Напомню, что параметры

duration, easing

complete

можно также передавать методу

animate()

в виде отдельных аргументов. То есть предыдущий анимационный эффект можно запустить так:

$("img").animate({"width":"+=100"}, 500, "linear");

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

<b>// Требуется скрыть изображения, подобно методу hide(), при этом изменение </b>

<b>// размеров изображения должно протекать линейно, а изменение непрозрачности -</b>

// с применением функции перехода "swing" по умолчанию

// Первый способ:

<b>// Использовать параметр specialEasing, чтобы указать другую функцию перехода </b>

$("img").animate({ width:"hide", height:"hide", opacity:"hide" },

 { specialEasing: { width: "linear", height: "linear" }});

// Второй способ:

<b>// Передать массивы [целевое значение, функция перехода] в объекте,</b>

// который передается в первом аргументе.

$("img").animate({

<b>  width: [&quot;hide&quot;, &quot;linear&quot;], height: [&quot;hide&quot;, &quot;linear&quot;], opacity:&quot;hide&quot;</b>

});

19.5.3. Отмена, задержка и постановка эффектов в очередь

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

stop():

он останавливает воспроизведение текущего анимационного эффекта для выбранных элементов. Метод

stop()

принимает два необязательных логических аргумента. Если в первом аргументе передать true, очередь анимационных эффектов для выбранных элементов будет очищена: т. е. вместе с текущим эффектом будут отменены все остальные эффекты, находящиеся в очереди. По умолчанию этот аргумент принимает значение false: если аргумент не указан, эффекты, находящиеся в очереди, не отменяются. Второй аргумент определяет, должны ли изменяемые CSS-свойства остаться в текущем состоянии или им должны быть присвоены конечные значения. Значение true во втором аргументе заставляет присвоить им конечные значения. Значение false (или отсутствие аргумента) оставляет текущие значения CSS-свойств.