Анимация на jQuery и JavaScript
Примеры анимации с помощью 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