使用js交叉融合图像

Question

我正在尝试设置一个菜单，其中每个子菜单项在悬停时在同一个框中显示一个图像；

var i = 0;
while (i < imageS.length) { /* select menu items */
  imageS[i].onmouseover = function() { /* image source (menu item) mouseover */
    imageD.style.display = "block"; /* show container */
    var ops = this.getElementsByTagName("img")[0].src; /* find new image url */
      imageD.style.background = "url(" + ops + ") no-repeat left"; /* set new image in the background */
      imageD.style.backgroundSize = "cover"; /* set background size */
    setTimeout(function() { /*
    imageD.getElementsByTagName("img")[0].src = ops; /* set new image in the img tag */
      imageD.getElementsByTagName("img")[0].style.transition = "opacity 0.5s linear"; /* fade in transition */
      imageD.getElementsByTagName("img")[0].style.opacity = "1"; /* fade in */
    }, 500);
  }
  imageS[i].onmouseout = function() { /* image source (menu item) mouseover */
    imageD.getElementsByTagName("img")[0].style.transition = "opacity 0.5s linear"; /* fade out transition */
    imageD.getElementsByTagName("img")[0].style.opacity = "0"; /* fade out */
    imageD.style.display = "none"; /* hide container */
  };
  i++;
}

你可以在这里看到它的功能：https://ilcastellovolante.it/?cmp_bypass=c81630e1be750b5840512f60da8adb10#

当过渡结束时会有一点闪烁，有人知道为什么吗？

提前感谢=)

Answer 1

您正在运行css动画，并同时在同一元素上调用display:none。这可能是造成神器的原因。由于您将不透明度设置为0，因此不需要同时设置display:none。当您删除该行时，它会发生变化吗？

imageS[i].onmouseout = function() { /* image source (menu item) mouseover */
    imageD.getElementsByTagName("img")[0].style.transition = "opacity 0.5s linear"; /* fade out transition */
    imageD.getElementsByTagName("img")[0].style.opacity = "0"; /* fade out */
    // REMOVE :: imageD.style.display = "none"; /* hide container */
  };