$(element).animate({"gradient":"linear-gradient(rgb(r,g,b) 0%, rgb(r,g,b) 100%)"});
Requirements:
jquery-cssHooks to use linear-gradient() without setting specific css rules for every browser
Add some lines to apply "progid:DXImageTransform.Microsoft.gradient" filter
Example:
click to change gradient
gradients.js (ie7+ linear gradient)
/*!
* Copyright (c) 2011 Tom Ellis (http://www.webmuse.co.uk)
* Linear and Radial Gradient cssHook for jQuery
* Limitations:
- Works with jQuery 1.4.3 and higher
- Works in Firefox 3.6+, Safari 5.1+, Chrome 13+, Opera 11.10+, IE9+
- Radial Gradients DO NOT work in Opera yet (Doesn't make sense I Know!)
- Only works for background and background image CSS properties
* Licensed under the MIT License (LICENSE.txt).
*/
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
(function($) {
var div = document.createElement( "div" ),
divStyle = div.style,
rLinear = /^(.*?)linear-gradient(.*?)$/i,
rRadial = /^(.*?)radial-gradient(.*?)$/i,
rLinearSettings = /^(.*?)(:?linear-gradient)(\()(.*)(\))(.*?)$/i,
rRadialSettings = /^(.*?)(:?radial-gradient)(\()(.*?)(\))(.*?)$/i,
rSupportLinearW3C = /(^|\s)linear-gradient/,
rSupportLinearMoz = /(^|\s)-moz-linear-gradient/,
rSupportLinearWebkit = /(^|\s)-webkit-linear-gradient/,
rSupportLinearOpera = /(^|\s)-o-linear-gradient/,
rSupportRadialW3C = /(^|\s)radial-gradient/,
rSupportRadialMoz = /(^|\s)-moz-radial-gradient/,
rSupportRadialWebkit = /(^|\s)-webkit-radial-gradient/,
rSupportRadialOpera = /(^|\s)-o-radial-gradient/,
rWhitespace = /\s/,
rWhiteGlobal = /\s/g,
cssProps = "background backgroundImage", //listStyleImage not supported yet
cssLinear = "filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#aaaaaa',GradientType=0 );background-image: -moz-linear-gradient(red, blue);background-image: -webkit-linear-gradient(red, blue);background-image: -o-linear-gradient(red, blue);background-image: linear-gradient(red, blue);",
cssRadial = "background-image: -moz-radial-gradient(circle, orange, red);background-image: -webkit-radial-gradient(circle, orange, red);background-image: -o-radial-gradient(circle,red, blue);background-image: radial-gradient(circle, orange, red);",
cssPropsArray = cssProps.split( rWhitespace );
divStyle.cssText = cssLinear,
linearSettings = function ( value ) {
var parts = rLinearSettings.exec( value );
value = value.replace( new RegExp(parts[2], 'g') , $.support.linearGradient );
return value;
},
radialSettings = function ( value ) {
var parts = rRadialSettings.exec( value );
value = value.replace( new RegExp(parts[2], 'g') , $.support.radialGradient );
return value;
};
$.support.linearGradient =
rSupportLinearW3C.test( divStyle.backgroundImage ) ? "linear-gradient" :
(rSupportLinearMoz.test( divStyle.backgroundImage ) ? "-moz-linear-gradient" :
(rSupportLinearWebkit.test( divStyle.backgroundImage ) ? "-webkit-linear-gradient" :
(rSupportLinearOpera.test( divStyle.backgroundImage ) ? "-o-linear-gradient" :
false)));
if(/(^|\s)progid:DXImageTransform.Microsoft.gradient/.test(divStyle.filter)){
$.support.ie=true;
}
divStyle.cssText = cssRadial;
$.support.radialGradient =
rSupportRadialW3C.test( divStyle.backgroundImage ) ? "radial-gradient" :
(rSupportRadialMoz.test( divStyle.backgroundImage ) ? "-moz-radial-gradient" :
(rSupportRadialWebkit.test( divStyle.backgroundImage ) ? "-webkit-radial-gradient" :
(rSupportRadialOpera.test( divStyle.backgroundImage ) ? "-o-radial-gradient" :
false)));
if ( $.support.linearGradient && $.support.linearGradient !== "linear-gradient" ) {
$.each( cssPropsArray, function( i, prop ) {
$.cssHooks[ prop ] = {
set: function( elem, value ) {
if( rLinear.test( value ) ){
elem.style[ prop ] = linearSettings( value );
} else if ( rRadial.test( value ) ) {
elem.style[ prop ] = radialSettings( value );
} else {
elem.style[ prop ] = value;
}
}
};
});
}
else if($.support.ie){
$.cssHooks[ "backgroundImage" ] = {
set: function( elem, value ) {
var startcolor=$.grep(value.replace(/(progid:DXImageTransform.Microsoft.gradient|startColorstr|endColorstr|GradientType|-o|-webkit|-moz|linear|radial|from|\bto\b|gradient|top|left|bottom|right|\d*%)/g,'').match(/(rgb\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return $.trim( s )});
var c1=$.map(startcolor[0].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);});
var c2=$.map(startcolor[1].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);});
var c3=rgbToHex(c1[0],c1[1],c1[2]);
var c4=rgbToHex(c2[0],c2[1],c2[2]);
var filter="progid:DXImageTransform.Microsoft.gradient( startColorstr='"+c3+"', endColorstr='"+c4+"',GradientType=0 )";
elem.style[ "filter" ] =filter;
}
};
}
div = divStyle = null;
})(jQuery);
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="gradients.js" type="text/javascript"></script>
<script src="animate-gradientsie.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#element").click(function(){
$(this).animate({"gradient":"linear-gradient(rgb("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+") 0%, rgb("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+") 100%)"},3000);
});
});
</script>
</head>
<body>
<div id="element">
gradient
</div>
</body>
</html>
style.css
#element{
width:500px;
height:600px;
display:block;
position:absolute;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* Opera */
background-image: -o-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(1, #aaaaaa));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #000000 0%, #aaaaaa 100%);
/* ie */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#aaaaaa',GradientType=0 );
}
animate-gradientsie.js (if filter exists convert hex color to rgb)
function hexToRgb(hex) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? parseInt(result[1], 16)+","+parseInt(result[2], 16)+","+parseInt(result[3], 16) :null;
}
$.fx.step['gradient']=function(fx){
if(!fx.start){
var css=$(fx.elem).css("filter")!="none"?$(fx.elem).css("filter"):$(fx.elem).css("background-image");
var startcolor=$.grep(css.replace(/(progid:DXImageTransform.Microsoft.gradient|startColorstr|endColorstr|GradientType|-o|-webkit|-moz|linear|radial|from|\bto\b|gradient|top|left|bottom|right|\d*%)/g,'').match(/(rgb\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return $.trim( s )});
var endcolor=$.grep(fx.end.replace(/(-o|-webkit|-moz|linear|radial|from|\bto\b|gradient|top|left|bottom|right|\d*%)/g,'').match(/(rgb\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return $.trim( s )});
if(/^(.*?)progid:DXImageTransform(.*?)$/i.test(css)){
startcolor[0]=hexToRgb(startcolor[0]);
startcolor[1]=hexToRgb(startcolor[1]);
}
fx.start={top:$.map(startcolor[0].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);}),bottom:$.map(startcolor[1].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);})};
fx.endgradient={top:$.map(endcolor[0].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);}),bottom:$.map(endcolor[1].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);})};
fx._gradient={top:$.map(fx.start.top,function(n,i){return -(n-fx.endgradient.top[i])}),bottom:$.map(fx.start.bottom,function(n,i){return -(n-fx.endgradient.bottom[i])})};
}
var rgb1=$.map(fx._gradient.top,function(n,i){return fx.start.top[i]+Math.floor(n*fx.pos)});
var rgb2=$.map(fx._gradient.bottom,function(n,i){return fx.start.bottom[i]+Math.floor(n*fx.pos)});
$(fx.elem).css({"background-image":"linear-gradient(rgb("+rgb1+") 0%, rgb("+rgb2+") 100%)"});
}
