jQuery数値backgroundColorアニメーション

Question

.animate（）メソッドを使用する場合は、jQueryカラープラグインまたはjQuery UIを使用して色をアニメーションする必要があることは知っています。

jQueryを使用して＃333〜＃999 のようにグレーの番号をアニメーション表示することは可能でしょうか？このプラグインはありませんか？

これが可能であれば、誰でもコードのように見えるだろうか？

Answer 1

大部分のカラーアニメーションを処理するjquery-uiのチャンクがあります。

$.each(["backgroundColor", "borderBottomColor", "borderLeftColor", 
    "borderRightColor", "borderTopColor", "borderColor", "color", "outlineColor"], 
function(i, attr) { 
    $.fx.step[attr] = function(fx) { 
     if (!fx.colorInit) { 
      fx.start = getColor(fx.elem, attr); 
      fx.end = getRGB(fx.end); 
      fx.colorInit = true; 
     } 

     fx.elem.style[attr] = "rgb(" + 
      Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + "," + 
      Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + "," + 
      Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ")"; 
    }; 
}); 

最初の色の値を解析して補間し、ステップします。 $.fx.stepはjQueryコアの一部です。色の解析機能をコピーしても、はになるはずです。

EDIT

は、ここで参考のために解析する色です。

// 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) { 
     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],10), parseInt(result[2],10), parseInt(result[3],10)]; 

     // 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 
     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 colors["transparent"]; 

     // Otherwise, we're most likely dealing with a named color 
     return colors[$.trim(color).toLowerCase()]; 
} 

function getColor(elem, attr) { 
     var color; 

     do { 
       color = $.curCSS(elem, attr); 

       // Keep going until we find an element that has color, or we hit the body 
       if (color != "" && color !== "transparent" || $.nodeName(elem, "body")) 
         break; 

       attr = "backgroundColor"; 
     } while (elem = elem.parentNode); 

     return getRGB(color); 
}; 

、これらの機能はjquery-uiで使用されている唯一の場所は、カラーアニメーションのためであるので、私は、このかなり最小限の実装を検討します。

EDIT 2

はちょうどそれをテストし、これは限り、あなたは色の名前を使用しないように動作します。 （colors['transparent']への参照は[255,255,255]に置き換えることができます）。名前の色を使用するには、もう少し抜けたコードがあります。

var 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] 
};