Анимация на jQuery и JavaScript

Категория: jQuery

Примеры анимации с помощью jQuery и чистого JavaScript.

Примеры методов управления анимацией на jQuery

$videoEl.fadeTo(3000, 1);   // $.fadeIn(3000);  // Проявление/нарастание
$videoEl.fadeTo(3000, 0.2); // $.fadeOut(3000); // Затухание/затемнение

$videoEl.animate({opacity: 0, volume: 0, easing: 'linear'}, 3000); // Анимация затухания opaciity и громкости видео

$videoEl.delay(5000).fadeOut(3000); // Задержка перед анимацией в 5 сек.

$videoEl.stop(true, false); // $.stop(clearQueue, jumpToEnd) // Остановить анимации и очистить очередь анимаций 'fx' (по умолчанию)
$videoEl.finish();       // Остановить текущую анимацию, удалить все анимации в очереди и завершить все анимации
jQuery.fx.off = true;    // Отключить глобально все анимации
$videoEl.queue().length; // Количество анимаций в очереди


Примечание

Ф-ция $.delay() может не всегда брать в расчет длительность предыдущей (запущенной в данный момент) анимации. При этом запущенная анимация есть в очереди.

Как решить проблему не знаю, использовал setTimeout():

let fadeOutTimer = setTimeout(() => {
  $videoEl.animate({opacity: 0, volume: 0, easing: 'linear'}, 3000);
}, 7000);

Примеры методов управления анимацией на JavaScript

См.: https://developer.mozilla.org/ru/docs/Web/API/Element/animate

Простой пример анимации:

element.animate([{opacity: 1}, {opacity: 0}], 3000);

Опции процесса анимации:

let keyframes = [
  {opacity: 1, easing: 'ease-out'}, // from
  {offset: 0.3, opacity: 0.2},      // 30%
  {opacity: 0, easing: 'ease-in'},  // to
];

let keyframes2 = {
  opacity:         [0, 1],                     // offset: from, to
  backgroundColor: ['red', 'yellow', 'green'], // offset: 0, 0.5, 1
  transform:       ['translate3D(0, 0, 0)', 'rotate(360deg)'],
}

let options = {
  duration: 3000,
  delay: 2000,
  easing: 'linear', // linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(0.42, 0, 0.58, 1)
  fill: 'forwards', // forwards - сохранить конечное состояние эффектов анимации
  iterations: Infinity,
};

element.animate(keyframes, options);


#jquery, #animate, #animation, #animation keyframes, #fade-in, #fade-out

категория: jQuery