Posted By

jdfwarrior on 10/31/09

Tagged

Versions (?)

Last Edited at 10/31/09 02:52pm

Statistics

Viewed 475 times

Favorited by 0 user(s)

Related snippets

jQuery Crossfade Plugin

/ Published in: JavaScript

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.

Highlighted TextExpand

(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);

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.