javascript - fadeIn 和 fadeOut 不适用于图像

Question

当我将鼠标悬停在 image2 上的某些坐标上时，我想在侧面显示特定图像(其中)。使用 document.getElementById("xyz1").style.display="block" 有效但不是 document.getElementById("xyz1").fadeIn()。关于如何产生淡入淡出效果的任何想法？

我想做的是，当我将鼠标悬停在 image1 上时，image0 应该淡出，image1 应该淡入，然后当我将鼠标悬停在 image0 上时，image1 应该淡出，image0 应该淡入

HTML:

<area shape="rect" coords="1,1,40,40" onmouseover ="f(0)">
<area shape="rect" coords="50,50,100,100" onmouseover ="f(1)">

<img id="image0"  src="../img1.jpg" style="display:block">
<img id="image1"  src="../img2.jpg" style="display:none">

JS: 有效的版本:

function f(i){
  document.getElementById("image0").style.display="block";
  document.getElementById("image1").style.display="none";

JS: 不起作用的版本(没有任何反应，没有变化):

function f(i){
  document.getElementById("image0").fadeIn();
  document.getElementById("image1").fadeOut;

Answer 1

fadeIn() 和 fadeOut() 是 jQuery 方法(不是原生 JavaScript 方法)。如果您引用最新的jQuery library ，您可以将您的元素转换为 jQuery 对象，然后应用您的 fadeIn 和 fadeOut。

$('#image0').fadeIn();
$('#image1').fadeOut();