Как сделать проверку изменения ширины экрана на jQuery?

Question

Нужно сделать что-то типо медиа запроса css, но только в jQuery. Пробовал много вариантов, но почему-то в один момент анимация просто не работает. Как сделать так, чтобы анимация срабатывала только тогда, когда ширина экрана больше 800px? Или же, как зделать проверку на resize?

var logoIcon = $('.account-icon')
var logoText = $('.account-title')
var body = $('.account-body')


body.mouseenter(function(){
$(logoIcon).animate({ "left": "8px", "opacity": "1" }, "600" );
}).mouseleave(function(){
  $(logoIcon).animate({ "left": "24px", "opacity": "0" }, "600" );
})

body.mouseenter(function(){
  $(logoText).animate({ "left": "8px" }, "600" ).css({"color": "#fbd784"});
}).mouseleave(function(){
  $(logoText).animate({ "left": "0" }, "600" ).css({"color": "#fff"});
})

Answer 1

событие ресайз окна

$(window).resize(function(){});

проверка ширины окна

if($(window).width() > 800){}

Answer 2

Подошло такое решение:

Записываем в переменную нужную нам ширину.

const mediaQuery = window.matchMedia('(max-width: 800px)')

Делаем проверку условием.

if (mediaQuery.matches) {}

БЛОГ НА HUSL

Как сделать проверку изменения ширины экрана на jQuery?

Ответы (2 шт):