0

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 :)

Community
  • 1
  • 1
Bosiwow
  • 2,025
  • 3
  • 28
  • 46
  • Please provide an example of you problem. You can make JSFIDDLE - http://jsfiddle.net/ – Ishan Jain Oct 19 '13 at 07:54
  • anImage.fadeIn() is not possible and also why do that when you attempt a jQuery statement just before it – mplungjan Oct 19 '13 at 08:18
  • If you KNEW how annoying it is to answer a question that is "Show me how to fade in an image" that then later becomes "show me how to fade in a Canvas element"... Next time give the WHOLE story – mplungjan Oct 19 '13 at 12:14
  • I guess `context.globalAlpha= 0%->100%` is pseudocode, but there is no point in increasing the globalAplpha before rendering. – mplungjan Oct 19 '13 at 12:30

3 Answers3

1

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();
}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

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

Rikard
  • 7,485
  • 11
  • 55
  • 92
  • I edited my question, can you please have a look and tell me what's wrong ? – Bosiwow Oct 19 '13 at 08:20
  • You are mixing DOM and jQuery in a very unhealthy way – mplungjan Oct 19 '13 at 08:24
  • I tried your demo in my example, but the problem is that the image that fades in, is placed next to my canvas, and not over my canvas. I want the deadscreen to be placed over the canvas, and scale the deadscreen to the size of my canvas, is that possible? – Bosiwow Oct 19 '13 at 08:29
  • @mplungjan, what do you mean by unhealthy? that would be better do use just jQuery or just vanilla? – Rikard Oct 19 '13 at 10:11
  • @user2815780, you need to use the correct id inside the selector, like: `jQuery('#imageID').fadeIn()` – Rikard Oct 19 '13 at 10:18
  • Using new Image does not create a jQuery object. See my answer for a cleaner solution – mplungjan Oct 19 '13 at 12:12
0

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();
}
JohnnyJS
  • 1,320
  • 10
  • 21