jquery fading in on screen after time

Question

Hi guys iam trying to figure out how i can get an image to appear onto the screen after a certain amount of time , after the animation has started.

So i got an image and i have used css to place it where i want it to be.

#laser
{
   position: absolute;
   left: 650px;
}

Dose anyone know how i can possibly get that image not to appear when the animation starts but to appear after 3 seconds in that certain place where i have used css to place it?

Edit: This is the code i got so far.

<div id="laser">
  <img src="images/laser.png" alt="laser">
</div>

#laser
{
   position: absolute;
   left: 650px;
   display: none;
}

Then i just used the code that you gave me. But it just stop everything else from working.

$('#laser').animate({
    width: '100px',
    height: '100px'
}, 3000, function() {
    $(this).show('slow');
});​

Link to my code if u want to look at it: http://jsfiddle.net/wdy5P/5/

Answer 1

Use the .animate() method.. After the specified duration the code in the callback will be executed..

$('#laser').animate({
    width: '100px',
    height: '100px'
}, 3000, function() {
    $(this).show('slow');
});​

Check Fiddle

Answer 2

Adding a single millisecond to show() makes it an animation (invisible to the eye but added to the FX queue), and in turn lets you use the delay() function to delay the image being shown by 3000 milliseconds (3 seconds):

$('#laser').delay(3000).show(1);

The image would of course have to be initially display: none;