使用javascript淡入图像答案

【问题标题】：fade in images with javascript使用javascript淡入图像
【发布时间】：2012-08-15 10:57:33
【问题描述】：

不使用jquery，是否可以同时淡入和替换另一个图像？

我创建了一个带有复杂多边形区域的地图，onmouseover 和 onmouseout 将 imageA 替换为 imageB，如下面的函数所示。但是，替换图像时过渡过于突然。如果我可以简单地在“if (aa==0) {...}”下面添加几行代码来做到这一点，那就太棒了。不幸的是，我对 javascript 的基本了解阻止了我这样做。

aa=0;
function replaceImage()
{
if (aa==0) 
  {
  aa=1;
  document.getElementById('imageA').src="img/imageB.png";
  }
else
  {
  aa=0;
  document.getElementById('imageA').src="img/imageA.png";
  }
}

非常感谢！

【问题讨论】：

"不使用 jquery，是否可以..." - 当然。 jQuery 不能做任何在“普通”JavaScript 中不可能做的事情......你会想使用 setTimeout() 或 setInterval() 来更新所涉及元素的 CSS 不透明度。
检查这个类似的问题：stackoverflow.com/questions/11572128/…

标签： javascript map

【解决方案1】：

是的，您可以使用循环播放并调整图像的不透明度以淡入淡出。如果您愿意使用 css3，您可能想查看此链接。 http://css3.bradshawenterprises.com/cfimg/

【讨论】：

请注意 - 不透明度非常棘手。 Jquery 进行了许多操作以使其跨浏览器工作。
是的，不透明度有时会很棘手，当您必须调整 z-index 以使事情看起来像您想要的那样时，它会很痛苦。
css 的问题是我打算将多个图像叠加在一起，然后鼠标悬停（在“默认图像”中的特定区域，显示其中一个图像。css 似乎没有在使用区域和地图时工作，因为它们不是可见元素，因为我被告知它不是可见元素