При hover менять картинки?

Question

[Frostik12]

Добрый день, подскажите пожалуйста как реализовать плавность смены картинок.



При наведении на карточки, справа меняются картинки.
Сейчас реализовано вот так

<ul class="vacancion__list">
                            <li data-img="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5XnMTrmQRz5MX-jfUsvdkPyTltF-h-ZJaZ25onztpmhXOlYog" class="vacancion__item">
                                <p class="vacancion__item-title">Грузчик</p>
                                <p class="vacancion__item-price">30 000</p>
                                <span class="vanacion__item-number">01</span>
                            </li>
</ul>
</div>
                    <div class="vacancion__right">
                        <img src="img/vacancion/vacancion1.png" alt="" class="vacancion__img">
                      
                </div>

var liElems = document.querySelectorAll(".vacancion__item"),
  output = document.querySelector('.vacancion__img');

for (var i = 0; i < liElems.length; i++) {
  liElems[i].addEventListener("mouseenter", function(e) {
    output.src = this.dataset.img;
  });
}

Пример на CodePen https://codepen.io/Dmoooo/pen/MWJRare

Comments

[Рома Зварич]

Frostik12 , выложите, пожалуйста, полноценный пример кода, например, на CodePen.
Чтобы можно было посмотреть, как и что там меняется и на Вашем же примере показать варианты решения

[Frostik12]

Рома Зварич, https://codepen.io/Dmoooo/pen/MWJRare

Answer 1

[Рома Зварич]

Алгоритм:

1. Добавляем под текущую картинку новую elem.prepend(....)
   
2. У картинок свойство "transition: 1s"
   
3. Добавляем текущей картинке класс со свойством "opacity: 0" (она постепенно скрывается и если нужно, потом удаляем сам элемент из DOM)
   
4. Обновляет картинку, которая будет "текущей" по наличию класса
   

Идея с подстановкой "src" из атрибута "data-img" не очень хорошая. Если пользователь через мобильный зашел на сайт и скорость подключения маленькая или телефон не очень шустрый, картинки будут подгружаться с задержкой. Кажется, лучше их сразу все загрузить и просто скрывать все, а у нужной "opacity" выставлять на "1". Ну или в спрайт. Зависит от количества и качества.

Результат:
https://codepen.io/hisbvdis/pen/rNjbxbQ