Return to Snippet

Revision: 19811
at October 31, 2009 14:52 by jdfwarrior


Initial Code
(function($) {

	$.fn.dfcrossfade = function(options) {

		//options, obviously
		var defaults = {
			speed: 800,
			pause: 3000
		},

		options = $.extend(defaults, options);

		this.each(function() {
			
			//grab this item and the list items (children)
			//this way, the children are cached and not your
			//not constantly selecting the items from the dom
			var $this = $(this),
				$children = $this.children("li");
			
			//set css styling for selected item and the children
			$this.css({
				'position' : 'relative',
				'list-style' : 'none',
			});
			
			$children.css({
				'position' : 'absolute',
				'left' : 0,
				'z-index' : 0
			});
			
			var $first = $children.eq(0), //grab first element (top item)
				$next, //initalize variable to hold the next item
				length = $children.length, //determine length of the array
				index = 0; //initialize an index variable
				
				//set z-index of the first item to 2, above all others
				//because all others are 0
				$first.css({ 'z-index' : 2 }); 
			
			//start yor timer
			var timer = window.setInterval(function() {
				
				//determine if your at the end of the array
				//if so, set index to the first item
				//otherwise, increment to the next index
				if (!$children.eq(index+1).length) { index = 0; }
				else { index++; }
	
				//grab the next item
				$next = $children.eq(index);
				
				//set z-index for the next item so that it is, one above all other elements
				//but one under the top item
				$next.css({ 'z-index': 1 });
				
				//fade the top item out, revealing the next item
				$first.fadeTo(options.speed, 0, function() {
					
					//then just set the z-index to the lower level
					//and fade it back in
					$first.css({ 'z-index' : 0 }).fadeTo(0,1);
					
					//set the next, now the top, item to the top level
					$next.css({ 'z-index' : 2 });
					
					//make the new top item, $first
					$first = $next;
				});
				
			}, options.pause);
			
		});

		return this;

	};

})(jQuery);

Initial URL


Initial Description
This is just a basic jQuery crossfade plugin. Should be executed on a list object (ul or ol) because it does specifically look for the li children. The plugin, as implemented, has two options, speed and pause. Speed being the speed at which the top image fades, and pause being the amount of time between fades.

Initial Title
jQuery Crossfade Plugin

Initial Tags
plugin, jquery

Initial Language
JavaScript