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

Simple jQuery

 

 

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

<!DOCTYPE html>
<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 andposition:absolute. We also need to create a containing <div> for our images, so we create a unique CSS ID called “pics”:

<style>
#picOne, #picTwo {
display: none;
position:absolute;
}
 
#pics {
width:100px;
height:100px;
}
</style

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

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

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” <div> tag. The images and <div> 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:

  • I used transparent GIFs for this because transparent PNGs looked weird when they faded in and out. Of course, you can use a JPEG if your images don’t need to be transparent.

     

     
  • Properly syncing the various fades took a little planning. Note the combined time for .fadeIn()and .delay() for the first image is five seconds, equal to the timing on the .delay() for the second image. Also note that the first image takes 1.5 seconds to fade out while the second one takes the same amount of time to fade in. This keeps everything neat.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s