A fantastic jQuery plugin that can pan and cross-fade images, animating them with pure Javascript. This is one of those Flash-killers that really demonstrates the power (and memory-efficiency) of handling basic effects with toolkits like jQuery.

CrossSlide will take a target element, fill it with the maximum visible area of that image, then animate the image. When it nears the end, it will fade to the next picture and continue. Each picture has a direction property, specifying how it should be moved. Of course, you don't need to animate the images; the fade effect can be used on its own. It can even do a "Ken Burns" effect - zooming in smoothly as it animates.

So, to use CrossSlide, you need two things: a set of images to display, and a box to display them in. If you have a <div id="viewport">, you can easily fade through a set of images with this code:

$('#viewport').crossSlide({sleep:3,fade:1},[{src:'img/1.jpg'},{src:'img/2.jpg'}]);

The plugin constructor takes two arguments: a dictionary of configuration options, and a list of the properties for each image. In this example, the two images will each be shown for 3 seconds, before fading into the other. Remember that your <div id="viewport">container still needs to be appropriate for viewing the image. This will fade, but with a few extra options we can pan as well:

$('#viewport').crossSlide({speed:30,fade:1},[{src:'img/1.jpg',dir:'down'},{src:'img/2.jpg',dir:'up'}]);

Here, the speed is measured in pixels per second; each image object needs a "dir" property for direction. There's no sleep property, as the image doesn't get any time to sleep; the animation is really just altering the image's top CSS property.

The effect has to be seen to truly appreciate its usefulness: head over to the project page and check out the examples. The plugin is GPL licensed, so download it and enjoy.