jQuery：ブラウザ間でHEXからRGBへの計算が異なりますか？

Question

次のコードは、すべてのブラウザIEで完璧に動作します。いつものように。 この問題が発生する必要があるものです：

1. リンクの上にマウスを移動すると、その リンクの色を取得します。
2. そのカラーのRGB値を取得すると、 ベースと見なされるCSSは常に に設定されます。
3. 0.5秒
4. にわたってにおける新しい軽い影が離れてマウスを移動するときに 色を復元することカラー
5. アニメーションの軽い影を決定するために、新しいRGB値を使用して計算を行います元の値

私が言ったように、これまでのところ、IEの場合を除いて、コードは絶対にうまく動作します。新鮮な目を持つ人（そして無傷のヘアライン）がこれを見てもらえますか？違うことができますか？

function getRGB(color) { 
    // Function used to determine the RGB colour value that was passed as HEX 
    var result; 

    // 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 
    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)]; 
} 


var $oldColour; 
// Get all the links I want to target 
$('a').not('aside.meta a.notes_link, aside.meta ul li a, section.social_media a, footer a').hover(function() { 
    //code when hover over 
    //set the old colour as a variable so we can animate to that value when hovering away 
    $oldColour = $(this).css('color'); 

    //run the getRGB function to get RGB value of the link we're hovering over 
    var rgb = getRGB($(this).css('color')); 

    for (var i = 0; i < rgb.length; i++) 
     //for each of the 3 HEX values, determine if the value + an increment of 30 (for a lighter colour) is lighter than the max (255) 
     //if it is, use the HEX value plus the increment, else use the max value 
     rgb[i] = Math.min(rgb[i] + 30, 255); 

     //join the new three new hex pairs together to form a sinle RGB statement 
     var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 

    //animate the text link color to the new color. 
    $(this).animate({'color': newColor}, 500); 

}, function() { 
    //code when hovering away 
    //animate the colour back using the old colour determined above 
    $(this).animate({'color': $oldColour}, 500); 
}); 

あなたからのご意見をお待ちしております。

Answer 1

IEをテストしていないが、問題が初めて表示される場合は、コードを2回目に呼び出すために非常に小さなタイムアウト（10ms程度）でsetTimeoutを試してみてください。

$oldColour = $(this).css('color');と思われるコードの部分を見つけ出すだけの価値がありますが、console.logを追加して調べると、おそらく役立ちますし、他に何か起こっていることが分かるかもしれません今見ていない。

EDIT：このような何か：getFromHexが期待どおりに動作するように修正http://www.richieyan.com/blog/article.php?artID=32から1、のようなものにすることができます

$oldColour = $(this).css('color'); 
var rgb; 
if($oldColour.substring(0, 3) == 'rgb') { 
    rgb = getRGB($oldColour); 
} else { // it's a hex 
    rgb = getFromHex($oldColour); 
} 

：、これはどのようなicyrockの助けを借りて

function hex2rgb(hexStr){ 
    // note: hexStr should be #rrggbb 
    var hex = parseInt(hexStr.substring(1), 16); 
    var r = (hex & 0xff0000) >> 16; 
    var g = (hex & 0x00ff00) >> 8; 
    var b = hex & 0x0000ff; 
    return [r, g, b]; 
} 

Answer 2

です最終的なコードは次のようになります：

function getRGB(color) { 
    var result; 

    // 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 
    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)]; 
} 


var $oldColour; 

$('a').not('aside.meta a.notes_link, aside.meta ul li a, section.social_media a, footer a').hover(function() { 
    //code when hover over 
    $(this).stop(true, true); 
    $oldColour = $(this).css('color'); 

    var rgb; 

    function hex2rgb(hexStr){ 
     // note: hexStr should be #rrggbb 
     var hex = parseInt(hexStr.substring(1), 16); 
     var r = (hex & 0xff0000) >> 16; 
     var g = (hex & 0x00ff00) >> 8; 
     var b = hex & 0x0000ff; 
     return [r, g, b]; 
    } 


    if($oldColour.substring(0, 3) == 'rgb') { 
     rgb = getRGB($oldColour); 
    } else { // it's a hex 
     rgb = hex2rgb($oldColour); 
    } 

    for (var i = 0; i < rgb.length; i++) 
     rgb[i] = Math.min(rgb[i] + 30, 255); 
     var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 

    $(this).animate({'color': newColor}, 500); 

}, function() { 
    //code when hovering away 
    $(this).stop(true, true); 
    $(this).animate({'color': $oldColour}, 500); 
});