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

Question

[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();

Comments

[v3shin]

Посмотрите в сторону css animation.

[WapSter]

karelina-nat, а я настоятельно рекомендую последовать совету @v3shin
https://developer.mozilla.org/ru/docs/Web/CSS/tran...
https://html5book.ru/css3-animation/
оба варианта отлично дружат с медиа запросами.

[karelina-nat]

v3shin, я не могу посмотреть в ее сторону, потому что по требованию нужно именно через jQuery)

[karelina-nat]

WapSter, я не могу посмотреть в ее сторону, потому что по требованию нужно именно через jQuery)

Answer 1

[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);
        });
    }
}