Проблемы с animation jquery

182

17 ноября 2021, 07:20

Пытаюсь помощью jquery сделать следующие: сначала отрабатывает эффект FadeIn, потом callback-функцией вызывается анимация, изменяющая opacity и transform у другого элемента. Следом нужно плавно изменить прозрачность блока и включить фоновое видео. Вот что получилось:

<script> 
		$(function ($) { 
			$( "#image-svg" ).fadeIn ( 2000, function () { 
				$(".main h1").animate({ 
					"opacity":"1", 
					"transform":"translate3d(0, 100px, 0)"}, 1500, function () { 
					$(".main-block").css ('background', "rgba(0, 0, 0, 0.5)"); 
					$(".video-bg-1").get(0).play(); 
				}); 
			}); 
		}); 
	</script>

Первая проблема с transform - не отрабатывает. Opacity работает, а трансформация нет. И вторая проблема: как сделать плавность изменения фона? Спасибо.

Answer 1

jQuery.animate поддерживает анимацию только численных значений, о чем сказано в документации:

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.

Решение 1

Использовать CSS transition

.main h1 {
    transition: transform 1.5s linear;
}

После чего просто выставляйте значение CSS свойства

$('.main h1').css('transform', 'translate3d(0, 100px, 0)');

Решение 2

Использовать подобный трюк

$('.main h1').animate({
    opacity: 1
}, {
    duration: 1500,
    step: function(x) {
        // x - значение свойства opacity в определенный момент времени
        // которое растет от 0 (если по-умолчанию оно было 0) до 1 (как мы указали выше)
        $(this).css('transform', 'translate3d(0, ' + (x * 100) + 'px, 0)');
    },
    done: function() {
        // ...
    }
});