CODEWITHSUNDEEP
javascriptjquerycssfadein
user3731929
user3731929

Reputation: 5

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;

Upvotes: 0

Views: 862

Answers (3)

Nam Duong
Nam Duong

Reputation: 91

I think you should use these functions instead of fadeIn() and fadeOut()

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

Upvotes: -1

Trevan Hetzel
Trevan Hetzel

Reputation: 1369

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

Upvotes: 2

user3728078
user3728078

Reputation:

I think fadeIn() and fadeOut() exists only in jQuery

Upvotes: 0

Related Questions