Jquery onmouseover上的淡入/淡出="；swapImage（）；

我有这样一个标记，鼠标悬停在拇指上时，大图像会发生变化。它工作得很好，但是当鼠标悬停在拇指上时，当大图像发生变化时，如何添加一些fadein和out效果呢

<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>

我正在使用的javascript：

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];

        }

    }

var imgArray=新数组(
“car-big-1.jpg”，
“car-big-2.jpg”，
“car-big-3.jpg”，
“car-big-4.jpg”，
);
var imgPath=“资产/image/”；
函数交换图像（imgID）{
var theImage=document.getElementById（'theImage'）；
var newImg；
newImg=imgaray[imgID]；
theImage.src=imgPath+newImg；
}
函数preload images（）{
对于（变量i=0；i

您可以使用swapImage上的超时功能更改不透明度属性，并通过CSS添加过渡效果。您可以在下面的示例中看到，setTimout运行500ms，而转换运行250ms。这是平滑效果所必需的

请参见此示例（为了演示，我稍微更改了代码）：

var imgArray=新数组(
“car-big-1.jpg”，
“car-big-2.jpg”，
“car-big-3.jpg”，
“car-big-4.jpg”，
);
imgaray=[]；
让images=document.queryselectoral（“thumbs img”）；
images.forEach（i=>{
imgaray.push（i.src）
});
var imgPath=“资产/image/”；
让timeOut=null；
函数交换图像（imgID）{
var theImage=document.getElementById（'theImage'）；
var newImg；
newImg=imgaray[imgID]；
theImage.style.opacity=“0”；
clearTimeout（超时）；
timeOut=setTimeout（函数（）{
theImage.src=newImg；
theImage.style.opacity=“1”；
}, 500);
}
函数preload images（）{
对于（变量i=0；i

#拇指{
显示器：flex；
}
#形象{
最小高度：50vh；
}
#图像{
过渡：不透明度250ms；
}

谢谢！这正是我想要的