CODEWITHSUNDEEP
javascriptjqueryimagefade
Bosiwow
Bosiwow

Reputation: 2193

Fade in an image in javascript not working

I'm trying to fade in an image, but it doesn't work. I found this post: Javascript fade image in and out And tried the following code, but no luck :(

var anImage= new Image();
anImage.src='images\\anImage.gif'

jQuery(function(){$("anImage").fadeIn()})
anImage.fadeIn()

But I get the "Uncaught TypeError: Object # has no method 'fadeIn'" error. I must be doing something wrong. But I'm not seeing it :s. Please help,

Thanks in advance

================================================================================== My code looks now like this: 

var deadImg=      new Image();
deadImg.src='images/dead.gif'
deadImg.id= 'imageID'
deadImg.style.display = 'none'
jQuery('body').append(deadImg);

And I wrote a function, which should draw the image (fade it in on the canvas)

function deadScreen(){
GameOverSound.play();
jQuery('#deadImg.id').fadeIn();
}

But nothing is really happening. Am I doing something wrong?

==================================================================================

EDIT3:

function deadScreen(){
   GameOverSound.play();


   //increase the context.globalAlpha 0% ->100% and draw image
   context.globalAlpha= 0%->100%
   context.drawImage(deadImg,0,0,canvas.width,canvas.height);


  //at the end make sure nothing is transparant!
  context.globalAlpha=1
}

Can I do something like this? I thought using a for loop or something to increase transparancy from full transparant to not transparant. And with each step, redraw the image. Or isn't this a good idea?

============================================================================

Thank you everybody for your help. I solved the problem by increasing the globaltransparancy and redrawing the image. This is without jQuery and inside the canvas.

But still thank you very much to the people who helped me :)

Upvotes: 0

Views: 945

Answers (3)

mplungjan
mplungjan

Reputation: 177885

Use jQuery all the way

Live Demo

$(function() {
  $("<img/>",{"src":"images/anImage.gif","id":"deadImg"})
    .css({"display":"none"})
    .appendTo("body");
});

function deadScreen(){
  GameOverSound.play();
  $("#deadImg").fadeIn();
}

Upvotes: 1

JohnnyJS
JohnnyJS

Reputation: 1472

well for first, the error is triggered because the selector search elements on the DOM.

Look at jQuery.com for better understanding.

second if i may i will provide an algorithm about how to accomplish that.

  1. create new image object.
  2. create event listener for image to load.
  3. append the image to the dom.
  4. animate its opacity. for further explanation please comment.

@Rikard - Please implement a event listener for image loading, and only then animate it to user.

try this:

function deadScreen(){
GameOverSound.play();
jQuery('#deadImg').fadeIn();
}

Upvotes: 0

Rikard
Rikard

Reputation: 7805

Try this:

var anImage= new Image();
anImage.src='images//anImage.gif' // you need to use this slash "/", not backslash "\"
anImage.id = 'imageID';
anImage.style.display = 'none';
jQuery('body').append(anImage);
jQuery('#imageID').fadeIn();

Demo

Upvotes: 0

Related Questions