Смена фона через js

Question

Подскажите пожалуйста такой вопрос, при наведении на блок меняю фон страницы и обратно соответственно, хотелось плавное анимации, попытался установить transition на класс блока где будет меняться фон, вроде бы всё работает, но если переход фона не успел завершиться и я увожу мышь с блока, переход на оригинальный фон происходит мгновенно, как можно решить этот вопрос

$(oneimg).hover(
  function() {
    $('.wrapper').css('background-image', 'url(img/1.jpg)')
  }, 
  function() {
    $('.wrapper').css('background-image', 'url(css/2.jpg)')
  });

Answer 1

Пример реализации без js:

div{
background: url('https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg');
height: 500px;
width: 500px;
transition:all 1s;
background-size:cover;
}
.bg{
background: url('https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-mont-st-michel.jpg');
transition:all 1s;
opacity: 100;
}
.bg:hover{
transition:all 1s;
opacity: 0
}

<div><div class = 'bg'></div></div>

БЛОГ НА HUSL

Смена фона через js

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