karelina-nat
@karelina-nat

Как остановить анимацию картинки в зависимости от размера вьюпорта?

Я новичок в JS. Написала простую bounce анимацию картинки/ Теперь нужно отключить эту анимацию на вьюпорте меньше 1024. Не могу сообразить как, .resize и .width пробовала, но может не так как нужно.

Нужно именно через jQuery по требованиям, поэтому через CSS не предлагать)

Код анимации:
function bounceCenter() {
    $('.bounce-animation--center').css({
        bottom: 0
    });

    setInterval(function () {
        $('.bounce-animation--center').animate({
            bottom: '50px'
        }, 2000, function () {
            $(this).animate({
                bottom: '0px'
            }, 2000);
        });
    }, 4000);
}
bounceCenter();
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
karelina-nat
@karelina-nat Автор вопроса
Я смогла решить этот вопрос через window.resize, window.width и .stop

setInterval(animationCenter, 4000);
$(window).on('resize', function () {
    if ($(window).width() <= 1049) {
        $('.bounce-animation--center').stop(true, true);
        $('.bounce-animation--center').css({
            bottom: 0
        });
        return;
    }
    animationCenter();
})

function animationCenter() {
    if ($(window).width() > 1049) {

        $('.bounce-animation--center').animate({
            bottom: '50px'
        }, 2000, function () {
            $(this).animate({
                bottom: '0px'
            }, 2000);
        });
    }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы