jQuery：HEX到RGB計算瀏覽器之間的不同？

Question

以下代碼片段完美適用於所有瀏覽器，IE瀏覽器。照常。 這是需要做的：

1. 當鼠標懸停在鏈接，獲取 鏈接的顏色。
2. 獲取該顏色的RGB值， 視爲基礎CSS始終將 設置爲HEX值;
3. 使用新的RGB值，並做了計算，以確定顏色
4. 動畫的較淡，在經過一段0.5秒
5. 新較淡當移動鼠標離開，還原 顏色與原價值

正如我所說的，到目前爲止代碼工作絕對好，除了在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來測試它，但如果問題只是第一次顯示，請嘗試使用setTimeout以非常小的超時（10ms左右）第二次調用您的代碼。

而且，它可能是值得只是找出哪些部分的代碼不工作 - 我想$oldColour = $(this).css('color');，但增加了一些console.log，並找出，它可能會幫助你，你甚至可能會發現別的東西正在發生的事情，你現在看不到。

編輯：事情是這樣的：

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

其中getFromHex可以像從http://www.richieyan.com/blog/article.php?artID=32一，修改爲你期望的工作：

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

隨着icyrock的幫助下，這是什麼最終的代碼看起來像：

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