').css({display: $this.css('display'), position: 'relative', zIndex: 2}).addClass('gradient-content'));
}
$('.gradient-content', this).before(wrapper);
if (!opts.duration){
$.each(gradient, function(i) {$(this).css({'backgroundColor': getCSSColor(colorArray[i]), opacity: opts.opacity})});
if (opts.complete) opts.complete.call(this);
}else{
// animate the gradient
wrapper.animate({gradient: 1}, {
step: function(now, fx){
if (fx.state == 0){
fx.start = now = colorArray.length*1.1; // 10% buffer for an opacity gradient to keep the edge from being too sharp
fx.end = 0;
}
now = Math.round(now);
$.each(gradient, function(i) {
var index = i+now;
if (index < 0){
$(this).css({backgroundColor: getCSSColor(opts.from), opacity: opts.opacity});
}else if (index < colorArray.length){
$(this).css({backgroundColor: getCSSColor(colorArray[index]), opacity: opts.opacity});
}else if (index < fx.start){
var opacity = Math.round(1000*opts.opacity*(fx.start-index)/fx.start)/100; // round to hundredths; exponentials confuse opacity
$(this).css({backgroundColor: getCSSColor(opts.to), opacity: opacity});
}else{
$(this).css({backgroundColor: 'transparent', opacity: 0});
}
});
},
duration: opts.duration,
easing: opts.easing,
complete: opts.complete ? function(){ opts.complete.call($this[0]) } : undefined
});
}
});
};
$.fn.gradient.defaults = {
from: [0,0,0],
to: 'backgroundColor',
direction: 'horizontal',
position: 'top',
length: '100%',
duration: 0,
easing: 'linear',
opacity: 1,
complete: undefined
};
function getCSSColor(RGB){ return 'rgb('+Math.round(RGB[0])+','+Math.round(RGB[1])+','+Math.round(RGB[2])+')'};
// color code taken from jQuery UI effects
// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/
// Parse strings looking for color tuples [255,255,255]
function getRGB(color,elem) {
var result;
// Check if we're already dealing with an array of colors
if ( color && color.constructor == Array && color.length == 3 )
return color;
// Look for rgb(num,num,num)
if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
// Look for rgb(num%,num%,num%)
if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
// Look for #a0b1c2. The initial # is optional to be compatible with the original gradient
if (result = /#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
// Look for #fff
if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
// Look for rgba(0, 0, 0, 0) == transparent in Safari 3
if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
return $.fn.gradient.colors['transparent']
// Look for a named color or an attribute
return $.fn.gradient.colors[$.trim(color).toLowerCase()] || getColor(elem, $.trim(color));
}
function getColor(elem, attr) {
var color;
do {
color = jQuery.curCSS(elem, attr);
// Keep going until we find an element that has color, or we hit the body
if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
break;
attr = "backgroundColor";
} while ( elem = elem.parentNode );
return getRGB(color);
};
// Some named colors to work with
// From Interface by Stefan Petre
// http://interface.eyecon.ro/
$.fn.gradient.colors = {
aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0],
transparent: [255,255,255]
};
function ungradient(){
// gradient turns an
into , so we pop the content back out.
var $content = $('div.gradient-content', this);
$content.parent().html($content.html());
}
// hack to convert units into pixels
function getPixelValue($el, value, size) {
if (!value || typeof value == 'number') return value;
if (/^\d+(px)?$/i.test(value)) return parseInt(value);
if (/^\d+(\.\d*)?%/.test(value)) return size*parseFloat(value)/100;
var oldValue = $el.width();
$el.width(value);
var ret = $el.width();
$el.width(oldValue);
return ret;
};
})(jQuery);