jQuery: Calcul HEX à RGB différent entre les navigateurs?

Question

Le morceau de code suivant fonctionne parfaitement dans tous les navigateurs, barre IE. Comme d'habitude. Ce est ce qui doit arriver:

1. Lorsque vous survolez un lien, obtenir cette couleur de lien .
2. Obtenir la valeur RVB de cette couleur, étant donné que la base CSS sera toujours définie sur une valeur HEX;
3. utiliser la nouvelle valeur RGB et effectuer un calcul pour déterminer une teinte plus claire de cette couleur
4. Animate cette nouvelle nuance plus claire sur une période de 0,5 secondes
5. Lors du déplacement de la souris loin, restaurer la couleur de la valeur d'origine

Comme je l'ai dit, jusqu'à présent, le code fonctionne parfaitement bien, sauf dans IE. Est-ce que n'importe qui avec un nouvel ensemble d'yeux (et une ligne de cheveux intacte) peut regarder ceci? Peut-il être fait différent?

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

J'ai hâte de vous entendre Guru's.

Answer 1

Ne pas avoir IE pour le tester, mais si le problème apparaît seulement pour la première fois, essayez d'utiliser setTimeout avec un très petit délai (10ms environ) pour appeler votre code la deuxième fois.

En outre, il pourrait être utile de savoir quelle partie du code ne fonctionne pas - je suppose $oldColour = $(this).css('color');, mais ajouter quelques console.log et découvrir, il va probablement aider et vous pourriez même trouver quelque chose d'autre qui se passe que vous ne vois pas maintenant.

EDIT: Quelque chose comme ceci:

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

où getFromHex peut être quelque chose comme celui de http://www.richieyan.com/blog/article.php?artID=32, modifié pour fonctionner comme prévu:

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

Avec l'aide de icyrock, c'est ce que le le code final ressemble à:

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