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

 e.style.position = "relative"; // Сделать относит, позиционируемым

 var start = (new Date()).getTime(); // Запомнить момент начала анимации ; 

 animate() // Запустить анимацию

<b>  // Эта функция проверяет прошедшее время и изменяет координаты е.</b>

<b>  // Если анимацию пора завершать, восстанавливает первоначальное состояние </b>

<b>  // элемента е. Иначе изменяет координаты е и планирует следующий свой вызов, </b>

 function animate() {

 var now = (new Date()).getTime(); // Получить текущее время

 var elapsed = now-start; // Сколько прошло времени с начала?

 var fraction = elapsed/time; // Доля от требуемого времени?

 if (fraction < 1) { // Если рано завершать анимацию

<b>      // Вычислить координату х элемента е как функцию от доли общего </b>

<b>      // времени анимации. Здесь используется синусоидальная функция,</b>

<b>      // а доля общего времени воспроизведения умножается на 4pi,</b>

 // поэтому перемещение взад и вперед выполняется дважды,

 var x = distance * Math.sin(fraction*4*Math.PI);

 e.style.left = x + "px";

<b>      // Попробовать вызвать себя через 25 мсек или в конце запланированного</b>

<b>      // отрезка общего времени воспроизведения. Мы стремимся сделать</b>

<b>      // анимацию гладкой, воспроизводя ее со скоростью 40 кадров/сек.</b>

 setTimeout(animate, Math.min(25, time-elapsed));

 }

 else { // Иначе анимацию пора завершать

 e.style.cssText = originalStyle // Восстановить первонач. стиль 

 if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова

 }

}

<b>// Растворяет е от состояния полной непрозрачности до состояния полной прозрачности</b>

<b>// за указанное количество миллисекунд. Предполагается, что, когда вызывается </b>

<b>// эта функция, е полностью непрозрачен, oncomplete - необязательная функция,</b>

<b>// которая будет вызвана с элементом е в виде аргумента по завершении анимации.</b>

// Если аргумент time не задан, устанавливается интервал 500 мсек.

<b>// Эта функция не работает в IE, но ее можно модифицировать так, чтобы </b>

<b>// в дополнение к свойству opacity она использовала нестандартное </b>

// свойство filter, реализованное в IE. 

function fadeOut(e, oncomplete, time) {

 if (typeof e === "string") e = document.getElementByld(e);

 if (!time) time = 500;

<b>  // В качестве простой &quot;функции перехода&quot;, чтобы сделать анимацию немного</b>

<b>  // нелинейной, используется Math.sqrt: сначала растворение идет быстро,</b>

 // а затем несколько замедляется,

 var ease = Math.sqrt;

 var start = (new Date()).getTime(); // Запомнить момент начала анимации

 animate(); // И запустить анимацию

 function animate() {

 var elapsed = (new Date()).getTime()-start; // Прошедшее время 

 var fraction = elapsed/time; // Доля от общего времени

 if (fraction < 1) { // Если не пора завершать

 var opacity = 1 - ease(fraction); // Вычислить непрозрачн.

 e.style.opacity = String(opacity); // Установить ее в e 

 setTimeout(animate, // Запланировать очередной

 Math.min(25, time-elapsed)); // кадр

 }

 else { // Иначе завершить

 e.style.opacity = "0"; // Сделать е полностью прозрачным

 if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова

 }

}

Обе функции,

shake()

fadeOut(),

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