kaidez - Web Development Tutorials & JavaScript Coding Tips

TUTORIAL: A Simple jQuery Image Fade In/Fade Out With A Delay

By Kai Gittens | | Tutorials |tags: javascriptjquerylegacy| reading time: 3 min
image for the 'TUTORIAL: A Simple jQuery Image Fade In/Fade Out With A Delay' post

(Author's note - August 2025: This tutorial is WAAAAAAAAY out of date, but it remains my most-trafficked, most-shared blog post EVER! It's because of this post that I got a boatload of social media followers and multiple requests to help other developers that saw me as some kind of JavaScript authority. I've deleted old and outdated posts and articles from this blog, but I can't let this one go. Purely here for historical perspective...there are way more modern approaches to do what's being discussed here. -k)

Clients looooooove images that fade in and fade out on home pages. Flash was once the main tool of choice for this but jQuery now lets us do it with less code and guarantees that things will show up on multiple devices, iPhones included.

I had to do this recently for the project I mentioned in my previous post.

Here’s how I did it:



<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A Simple jQuery Fade In/Fade Out</title>

<style>
#picOne, #picTwo {
position:absolute;
display: none;
}

#pics {
width:100px;
height:100px;
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500);
});
</script>

</head>
<body>

<div id="pics">
<img src="firstPic.gif" width="100" height="100" id="picOne" />
<img src="secondPic.gif" width="100" height="100" id="picTwo" />
</div>

</body>
</html>

Let’s review the specific parts of the code that make the fade in/fade out work..

We create unique CSS IDs for each of our two images. They need to be hidden when the page first loads and also need to be stacked one on top of the other, so we respectively use display:none and position:absolute. We also need to create a containing for our images, so we create a unique CSS ID called “pics”:


    #picOne, #picTwo {
      display: none;
      position:absolute;
    }

    #pics {
      width:100px;
      height:100px;
    }

We have to embed the jQuery library into our web page…in this case, I embedded the one hosted over at jQuery.com:

As soon as the page is loaded, the jQuery .fadeIn() function fades in our first image in 1500 milliseconds (or, 1.5 seconds). The .delay() function acts as a counter and waits 3500 milliseconds (or, 3.5 seconds), then the .fadeOut() function fades it out in 1500 milliseconds (or, 1.5 seconds).


$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);

At the same time that the first image is doing its thing on page load, the .delay() function makes the second image wait 5 seconds before the .fadeIn()function fades it in in 1.5 seconds.


$('#picTwo').delay(5000).fadeIn(1500);

We place our two images in our “pics” tag. The images and tag are of equal width and height. And since the images were styled with position: absolute, they will be stacked one on top of the other. Whichever one is listed first is the one on top:


<div id="pics">
<img src="firstPic.gif" width="100" height="100" id="picOne" />
<img src="secondPic.gif" width="100" height="100" id="picTwo" />
</div>

That should do it…but let me make two points: