Fade in/out on onmouseover="swapImage();

Question

I have this markup where the big image changes on mouse hover on thumbs. It works fine but how to add some fadein and out effect when the big image changes while hovering on the thumbs?

<div id="image" class="prod-img-container">
   <a href="#"><img id="theImage" class="img-fluid" width="240" src="assets/image/car-big-1.jpg" alt=""></a>
</div>

<div id="thumbs" class="mouse-hover-info">
   <ul>
      <li><a class="active" href="#"><img src="assets/image/car-tn-1.jpg" width="60" alt="Car 1" onmouseover="swapImage(0);" onmouseout="swapImage(0);" /></a></li> 
      <li><a href="#"><img src="assets/image/car-tn-2.jpg" width="60" alt="Car 2" onmouseover="swapImage(1);" onmouseout="swapImage(0);" /></a></li>
      <li><a href="#"><img src="assets/image/car-tn-3.jpg" width="60" alt="Car 3" onmouseover="swapImage(2);" onmouseout="swapImage(0);" /></a></li>
      <li><a href="#"><img src="assets/image/car-tn-4.jpg" width="60" alt="Car 4" onmouseover="swapImage(3);" onmouseout="swapImage(0);" /></a></li>
   </ul>
</div>

the javascript I am using:

var imgArray = new Array(
        'car-big-1.jpg',
        'car-big-2.jpg',
        'car-big-3.jpg',
        'car-big-4.jpg',
    );

    var imgPath = "assets/image/";

    function swapImage(imgID) {
        var theImage = document.getElementById('theImage');
        var newImg;
        newImg = imgArray[imgID];
        theImage.src = imgPath + newImg;

    }


    function preloadImages() {      
        for(var i = 0; i < imgArray.length; i++) {
            var tmpImg = new Image;
            tmpImg.src = imgPath + imgArray[i];

        }

    }

Answer 1

You can change opacity property Using a timeout function on swapImage and addition transition effect through CSS. You can see in the example below that setTimout runs for 500ms while transition for 250ms. This is necessary for smooth effect.

See this example (I changed your code little bit for demonstration):

var imgArray = new Array(
  'car-big-1.jpg',
  'car-big-2.jpg',
  'car-big-3.jpg',
  'car-big-4.jpg',
);

imgArray = [];

let images = document.querySelectorAll("#thumbs img");
images.forEach(i => {
  imgArray.push(i.src)
});

var imgPath = "assets/image/";

let timeOut = null;

function swapImage(imgID) {
  var theImage = document.getElementById('theImage');
  var newImg;
  newImg = imgArray[imgID];

  theImage.style.opacity = "0";
  clearTimeout(timeOut);
  timeOut = setTimeout(function() {
    theImage.src = newImg;
    theImage.style.opacity = "1";
  }, 500);
}


function preloadImages() {
  for (var i = 0; i < imgArray.length; i++) {
    var tmpImg = new Image;
    tmpImg.src = imgPath + imgArray[i];
  }
}

#thumbs {
  display: flex;
}

#image {
  min-height: 50vh;
}

#theImage {
  transition: opacity 250ms;
}

<div id="image" class="prod-img-container">
  <a href="#"><img id="theImage" class="img-fluid" width="240" src="assets/image/car-big-1.jpg" alt=""></a>
</div>

<div id="thumbs" class="mouse-hover-info">
  <ul>
    <li><a class="active" href="#"><img src="https://images.unsplash.com/photo-1574359173105-4b248ead7a4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=642&q=80" width="60" alt="Car 1" onmouseover="swapImage(0);" onmouseout="swapImage(0);" /></a></li>
    <li><a href="#"><img src="https://images.unsplash.com/photo-1574473573257-3d804dd73d0d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="60" alt="Car 2" onmouseover="swapImage(1);" onmouseout="swapImage(0);" /></a></li>
    <li><a href="#"><img src="https://images.unsplash.com/photo-1574430032519-a1b649df3439?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=662&q=80" width="60" alt="Car 3" onmouseover="swapImage(2);" onmouseout="swapImage(0);" /></a></li>
    <li><a href="#"><img src="https://images.unsplash.com/photo-1574451311232-cb647e9d71f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="60" alt="Car 4" onmouseover="swapImage(3);" onmouseout="swapImage(0);" /></a></li>
  </ul>
</div>