jQuery：HEX到RGB计算不同浏览器之间？ [英] jQuery: HEX to RGB calculation different between browsers?

问题描述

下面的代码片段在所有浏览器，IE工作完美。照常。
这是需要发生的事情：

The following piece of code works perfectly in all browsers, bar IE. As usual. This is what needs to happen:

1. 将鼠标悬停在链接上时，获得
   链接颜色。 li>
   
2. 获取该颜色的RGB值，
   视为基本CSS将始终将
   设置为HEX值;




4. 在0.5秒内激活新的较亮阴影


5. 使用新的RGB值并执行计算以确定该颜色的较浅阴影。 >移动鼠标时，将
   的颜色恢复为原始值

1. When hovering over a link, get that link colour.
2. Get the RGB value of that colour, seeing as the base CSS will always be set to a HEX value;
3. Use the new RGB value and do a calculation to determine a lighter shade of that colour
4. Animate that new lighter shade in over a period of 0.5 secs
5. When moving the mouse away, restore the colour to the original value

正如我所说，绝对精细，除了IE。任何人都有新的眼睛（和一个完整的发际线）看看这个？可以做不同吗？

As I said, so far the code works absolutely fine, except in IE. Can anyone with a fresh set of eyes (and an intact hairline) take a look at this? Can it be done different?

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

如果您想查看现场演示版本，请转到此现场演示页面。悬停在顶部的标志与各种浏览器，看看我的意思。你会注意到，IE只使用错误的颜色一次，如果你再次悬停在它，悬停颜色是应该是...

If you'd like to see a live demo version, go to this live demo page. Hover of the logo at the top with various browsers to see what I mean. Something you'll notice is that IE only uses the wrong colour once, if you hover over it again, the hover colour is as it should be...

我期待着您的大师的回音。

I look forward to hearing from you Guru's.

推荐答案

没有IE测试，但如果问题显示只有第一次，尝试使用 setTimeout 与非常小的超时（10ms左右）来第二次调用您的代码。

Don't have IE to test it, but if the issue shows only for the first time, try using setTimeout with a very small timeout (10ms or so) to call your code the second time.

此外，可能值得找出代码的哪一部分不工作 - 我想 $ oldColour = $（this）.css （'color'）; ，但添加一些 console.log ，并发现，它可能会有帮助，你可能甚至会发现别的东西

Also, it might be worth just finding out what part of the code is not working - I suppose $oldColour = $(this).css('color');, but add some console.log and find out, it will probably help and you might even find out something else is happening that you don't see right now.

编辑：这样的：

$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 ，修改为按您的预期工作：

where getFromHex can be something like the one from http://www.richieyan.com/blog/article.php?artID=32, modified to work as you expect:

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

这篇关于jQuery：HEX到RGB计算不同浏览器之间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！