jQuery: HEX RVB de calcul entre les différents navigateurs?

Le morceau de code suivant fonctionne parfaitement dans tous les navigateurs, bar IE. Comme à l'habitude.
C'est ce qui doit arriver:

  1. Lors du survol d'un lien, d'obtenir que
    la couleur du lien.
  2. Obtenir la valeur RVB de la couleur,
    vu que la base de CSS sera toujours
    être réglé à une valeur HEXADÉCIMALE;
  3. Utiliser la nouvelle valeur RVB et faire des calculs afin de déterminer une teinte plus claire que la couleur
  4. Animer cette nouvelle teinte plus claire, sur une période de 0,5 sec.
  5. Lors du déplacement de la souris loin, restauration
    la couleur à la valeur d'origine

Comme je l'ai dit, jusqu'à présent, le code fonctionne très bien, sauf dans IE. Quelqu'un peut-il avec un regard neuf (intacte et une racine des cheveux) de prendre un coup d'oeil à cela? Peut-il être fait de 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 Gourou.

InformationsquelleAutor Tiny Giant Studios | 2010-11-24
  1. 7

    N'ont pas IE pour tester, mais si le problème ne montre que pour la première fois, essayez d'utiliser setTimeout avec un très petit délai d'attente (10 ms ou plus) pour appeler votre code la deuxième fois.

    Aussi, il pourrait être utile juste de trouver quelle partie du code ne fonctionne pas - et je suppose que $oldColour = $(this).css('color');, mais ajouter un peu de console.log et le savoir, il va probablement vous aider et vous pourriez même trouver quelque chose d'autre se passe que vous ne voyez 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 qu'il fonctionne 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];
}
    • merci pour l'entrée, je vais essayer de le setTimeout idée... Que pour la console.journal d'idée, console.enregistré moi-même à la mort: Non IE navigateurs voir $oldColour une valeur RGB, alors que IE ne voit en elle qu'un HEX. Après le premier vol stationnaire, c'est à dire alors qu'il considère comme une valeur RVB. Soupir.
    • OK, si c'est le seul problème, pourquoi ne pas vous suffit de cocher pour 'rgb' chaîne et, si c'est au début, analyser rvb, sinon analyser hex (fonction exemple ici: linuxtopia.org/online_books/javascript_guides/javascript_faq/...)? L'autre hack vous pouvez essayer de "réserver" une stupide élément pour ce, quelle que soit la charge $(...).css() vous donne, définir la color attribut CSS de l'élément à cette valeur et essayer de lecture - il peut vous donner des valeurs rvb.
    • Eish, clairement, je suis un jQuery noob... En théorie, je comprends ce que tu veux dire, mais je suis un peu désemparés quant à la façon de le faire 🙂
    • BTW - je vous remercie beaucoup pour le temps que vous passez sur ce, j'ai vraiment l'apprécier...
    • Parfait! Comme c'est toujours le cas avec le Ninja ici à Débordement de Pile - je suis de votre dette. Merci icyrock!
    • Pas de prob, content que ça a fonctionné! Beau site, btw.
    • Heh, merci - c'est un nouveau tumblr thème que je suis en développement, donc j'ai besoin d'être aussi flexible que possible, faisant autant de calcul de la couleurs, sans les bombardements de l'utilisateur avec les paramètres 🙂
    • rouge peut être fait même de plus simple: r = hex >> 16;

    InformationsquelleAutor icyrock.com
  2. 0

    Avec icyrock de l'aide, c'est ce que la version finale du code ressemble à ceci:

    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);
});
    InformationsquelleAutor Tiny Giant Studios