Background gradient animate IE support

Animate element background-image linear gradient like:
$(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%)"});
}