Question

当我鼠标悬停在image2上的某些坐标上时，我想在侧面显示特定图像（其中）。使用document.getElementById("xyz1").style.display="block"有效，但不是document.getElementById("xyz1").fadeIn()。任何想法如何导致fadeIn和fadeOut效果？

我想做的是当我将鼠标移到image1上时，image0应该是fadeOut而image1应该是fadeIn然后当我将鼠标移到image0上时，image1应该是fadeOut而image0应该是fadeIn

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();

Answer 2

我认为fadeIn（）和fadeOut（）仅存在于jQuery

中

Answer 3

我认为您应该使用这些功能而不是fadeIn()和fadeOut()

function infnc(){$('img').animate({opacity:'0'},300);}
function outfnc(){$('img').animate({opacity:'1'},300);}

fadeIn和fadeOut不适用于图像

3 个答案: