Revision: 19811
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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