{"id":803,"date":"2010-07-26T10:55:23","date_gmt":"2010-07-26T09:55:23","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=803"},"modified":"2026-05-17T16:34:38","modified_gmt":"2026-05-17T15:34:38","slug":"simple-jquery-image-crossfade","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/simple-jquery-image-crossfade\/","title":{"rendered":"Simple jQuery image crossfade"},"content":{"rendered":"

I wanted a simple jQuery crossfade effect for an image cycler last week, and surprisingly couldn’t find anything suitable. So I ended up writing my own, and here it is. Tested in IE6\/7\/8, Firefox 3, Chrome, Opera 9\/10, Safari 4, all on Windows XP, IE8\/9, Firefox, Chrome and Safari 5 on Win 7, Safari 5 on Mac OS X\/Snow Leopard, and Android Browser and Dolphin on Android.<\/p>\r\n\r\n

The demo<\/h3>\r\n\r\n
\r\n\"Hoverfly\r\n\"Fly\r\n\"Insect\r\n\"Fly\"\t\t\r\n<\/div>\r\n\r\n

This basic demo page<\/a> will show you exactly what’s needed.<\/p>\r\n\r\n

The code<\/h3>\r\n\r\n

You need the following basic html:<\/p>\r\n\r\n

<div id=\"cycler\">\r\n<img class=\"active\" src=\"image1.jpg\" alt=\"My image\" \/>\r\n<img src=\"image2.jpg\" alt=\"My image\" \/>\t\r\n<img src=\"image3.jpg\" alt=\"My image\" \/>\t\r\n<img src=\"image4.jpg\" alt=\"My image\" \/>\t\t\r\n<\/div><\/pre>\r\n\r\n
Here’s the necessary css – just to show the z-index and positioning – you’ll need to add some more to position as required. Depending on your layout you may also need to set the height and width on #cycler to match your images:<\/p>\r\n\r\n
\r\n#cycler{position:relative;}\r\n#cycler img{position:absolute;z-index:1}\r\n#cycler img.active{z-index:3}\r\n<\/pre>\r\n\r\n
And here’s the javascript:<\/p>\r\n\r\n
function cycleImages(){\r\n      var $active = $('#cycler .active');\r\n      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');\r\n      $next.css('z-index',2);\/\/move the next image up the pile\r\n<\/span>      $active.fadeOut(1500,function(){\/\/fade out the top image\r\n<\/span>\t  $active.css('z-index',1).show().removeClass('active');\/\/reset the z-index and unhide the image\r\n<\/span>          $next.css('z-index',3).addClass('active');\/\/make the next image the top one\r\n<\/span>      });\r\n    }\r\n\r\n$(document).ready(function(){\r\n\/\/ run every 7s\r\n<\/span>setInterval('cycleImages()', 7000);\r\n})<\/pre>\r\n\r\n
The logic<\/h3>\r\n
All the images are loaded with the page and positioned absolutely on top of each other, all with z-index=1<\/code>. One image is initially set with a class of “active”, which is positioned on the top of the stack with z-index = 3<\/code>.<\/p> \r\n\r\n
Then, using jQuery, I’m identifying the active image, and then the next image down. I’m doing this via the jQuery .next()<\/code> method. If there isn’t a next image – if we’re at the end of the images – I’m selecting the first image instead using .first()<\/code>. <\/p>\r\n\r\n
Now, once I’ve identified the next image, I’m assigning z-index=2<\/code> to this so it’s the second image down in the pile – and hence is visible when the top image fades out.<\/p>\r\n\r\n
Then, I’m fading out the active image. When this completes there’s a few things to do. First, I’m setting the z-index of the active image (now faded out) back to z-index=1<\/code>. Then, I’m reversing the fade by using the show()<\/code> method. It won’t be visible now because of the z-index. Finally, I’m removing the active class. Effectively, I’m putting this image back into the bottom pile.<\/p>\r\n\r\n
Nearly there. Then, with the next image, which is now on top anyway, I’m assigning z-index=3<\/code>, and then adding the active class to this image. <\/p>\r\n\r\n
Finally, all of this code is sitting in a function which I’m calling every seven seconds via setInterval()<\/code>.<\/p>\r\n
Responsive version<\/h3>\r\n
Making this responsive (without media queries, which is what this page uses) is pretty striaghtforward. The trick is to use a  ‘base’ image which is not absolutely positioned to set the dimensions of the cycler and then apply a max-width to #cycler. The base image is then cloned and the cloned version is faded in and out. Have a look at the responsive demo here<\/a>.<\/p>\r\n
Help! It doesn’t work<\/h3>\r\n
If you hit problems, start off by looking at my beginners’ guide to debugging jquery<\/a>. Most of the problems encountered by users are listed here.<\/p>\r\n\r\n
Can I use this on my site?<\/h3>\r\n
Probably. See my policies on using code from this site<\/a>.<\/p>\r\n\r\n
Variations on the basic crossfade<\/h3>\r\n
Here are a few variations, mostly built in response to questions or comments on the basic code. View the source to see how they’re done.<\/p>\r\n
Cycle through images once and then stop<\/a><\/p>\r\n
Multiple cyclers on a page (with a common periodicity)<\/a><\/p>\r\n
Multiple cyclers on a page (with different periodicity)<\/a><\/p>\r\n
Multiple cyclers with slideshow controls<\/a><\/p>\r\n
Cycler with variable timings<\/a><\/p>\r\n
Cycle divs instead of images<\/a><\/p>\r\n
Superimpose text on the cycler<\/a><\/p>\r\n
Cycler with fadeout transition<\/a><\/p>\r\n
Crossfade images, no slideshow<\/a><\/p>\r\n
Gallery with thumbnails<\/a><\/p>\r\n\r\n