Настройки анимации

В параметре <Объект с опциями> можно указать объект со следующими свойствами:

  • duration — время выполнения анимации. Можно указать значение в миллисекундах или значения "fast" (200 миллисекунд) и "slow" (600 миллисекунд). Значение по умолчанию: 400 миллисекунд. Пример указания 1000 миллисекунд:
<p>Абзац</p>
<input type="button" value="Отобразить или скрыть элемент" 
       id="btnStart">
<input type="button" value="Остановить анимацию" 
       id="btnStop">
<input type="button" value="Остановить и завершить" 
       id="btnStopEnd">
<div id="log"></div>
$('#btnStart').click( function() {
   $('p').toggle({
      duration: 1000
   });
});
$('#btnStop').click( function() {
   $('p').stop();
});
$('#btnStopEnd').click( function() {
   $('p').stop(true, true);
});
  • easing — закон анимации. Можно указать значения "swing" (значение по умолчанию) и "linear" (равномерное изменение на всем протяжении действия). Пример указания значения "linear":
$('#btnStart').click( function() {
   $('p').toggle({
      duration: 1000,
      easing: 'linear'
   });
});
  • specialEasing — позволяет задать разные законы анимации (свойство easing) для каждого атрибута стиля отдельно. В качестве значения указывается объект с названием атрибута стиля и названием закона анимации:
$('#btnStart').click( function() {
   $('p').toggle({
      duration: 1000,
      specialEasing: {
         width: 'swing',
         height: 'linear'
      }
   });
});
  • complete — содержит ссылку на функцию, которая будет вызвана после окончания анимации. Внутри функции обратного вызова доступен указатель this на текущий DOM-элемент. Пример:
$('#btnStart').click( function() {
   $('p').toggle({
      duration: 400,
      easing: 'linear',
      complete: function() {
         console.log('Анимация завершена');
      }
   });
});
  • queue — если указано значение true (значение по умолчанию), то анимация будет добавлена в очередь анимаций с названием "fx". Если указано значение false, то анимация будет выполнена сразу без добавления в очередь. Создадим очередь из двух анимаций и выведем в консоль количество анимаций в очереди:
$('#btnStart').click( function() {
   $('p').toggle({
      queue: true,
      complete: function() {
         console.log('Анимация завершена');
      }
   }).slideToggle();
   console.log( $('p').queue('fx').length ); // 2
});

В качестве значения можно указать строку с названием очереди. Для запуска анимации в этом случае нужно вызвать метод dequeue() с названием очереди:

$('#btnStart').click( function() {
   $('p').toggle({
      queue: 'myQueue',
      complete: function() {
         console.log('Анимация завершена');
      }
   }).dequeue('myQueue');
});
  • step — задает ссылку на функцию, которая будет вызываться на каждом шаге анимации для каждого атрибута по отдельности перед установкой значения. Формат функции:
function <Название функции>(Number now, Tween tween) {
   // ...
}

Через параметр now доступно текущее значение шага (вещественное число от 0 до 1), а через второй параметр — объект Tween с настройками анимации:

$('#btnStart').click( function() {
   $('p').toggle({
      duration: 5000,
      step: function(now, tween) {
         $('#log').text(now);
         console.log(tween);
      }
   });
});

В окне консоли отобразится множество строк, аналогичных этой:

Object { elem: <p>, prop: "width", easing: "swing",
         options: Object, now: 1270.007946016786,
         start: 1272, end: 0, unit: "px",
         pos: 0.0015660801754825981 }
  • start — задает ссылку на функцию, которая будет вызываться перед началом анимации. Формат функции:
function <Название функции>(Deferred animation) {
   // ...
}
  • progress — задает ссылку на функцию, которая будет вызываться после каждого шага анимации. Формат функции:
function <Название функции>(Deferred animation, Number progress,
                            Number remainingMs) {
   // ...
}
  • done — задает ссылку на функцию, которая будет вызываться после завершения анимации. Формат функции:
function <Название функции>(Deferred animation,
                            Boolean jumpedToEnd) {
   // ...
}
  • fail — задает ссылку на функцию, которая будет вызываться при ошибке или отмене анимации. Формат функции:
function <Название функции>(Deferred animation,
                            Boolean jumpedToEnd) {
   // ...
}
  • always — задает ссылку на функцию, которая будет вызываться после завершения анимации или при отмене. Формат функции:
function <Название функции>(Deferred animation,
                            Boolean jumpedToEnd) {
   // ...
}

Параметр jumpedToEnd будет содержать значение true, если анимация была отменена и сразу завершена, при этом объект находится в конечном состоянии. Пример:

$('#btnStart').click( function() {
   $('p').toggle({
      duration: 1000,
      start: function(animation) {
         console.log('start');
      },
      progress: function(animation, progress, remainingMs) {
         console.log('progress ' + progress);
      },
      done: function(animation, jumpedToEnd) {
         console.log('done ' + jumpedToEnd);
      },
      fail: function(animation, jumpedToEnd) {
         console.log('fail ' + jumpedToEnd);
      },
      always: function(animation, jumpedToEnd) {
         console.log('always ' + jumpedToEnd);
      },
      complete: function() {
         console.log('Анимация завершена');
      }
   });
});

При запуске анимации процесс будет выглядеть так:

start
progress 0.016000000000000014
progress 0.028000000000000025
…
progress 0.96
progress 0.966
progress 1
done undefined
Анимация завершена
always undefined

Если при выполнении анимации нажать кнопку Остановить анимацию, то последовательность будет другой:

start
progress 0.016000000000000014
progress 0.028000000000000025
…
progress 0.398
progress 0.41800000000000004
fail undefined
always undefined

Если при выполнении анимации нажать кнопку Остановить и завершить, то последовательность будет такой:

start
progress 0.016000000000000014
progress 0.028000000000000025
…
progress 0.48
progress 0.494
progress 1
done true
Анимация завершена
always true

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов