Search code examples
javascriptjquerycssfadein

fadeIn and fadeOut not working for image

I want to display particular image(among them) on the side when I do mouseover on certain coordinates on image2. Using document.getElementById("xyz1").style.display="block" works but not document.getElementById("xyz1").fadeIn(). Any ideas how to cause fadeIn and fadeOut effects?

What I wanna do is that when I mouseover on image1, image0 should fadeOut and image1 should fadeIn and then when I mouseover on image0, image1 should fadeOut and image0 should 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: Version that works:

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

JS: Version that does not work(nothing happens, no change):

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

  • fadeIn() and fadeOut() are jQuery methods (not native JavaScript methods). If you reference the latest jQuery library, you can turn your elements into jQuery objects and then apply your fadeIn and fadeOut.

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