jQuery: HEX to RGB calculation different between browsers?

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

  • When hovering over a link, get that link colour.
  • Get the RGB value of that colour, seeing as the base CSS will always be set to a HEX value;
  • Use the new RGB value and do a calculation to determine a lighter shade of that colour
  • Animate that new lighter shade in over a period of 0.5 secs
  • When moving the mouse away, restore the colour to the original value
  • 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);
    });
    

    I look forward to hearing from you Guru's.


    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.

    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.

    EDIT: Something like this:

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

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

    有了冰雹的帮助,这就是最终代码的样子:

    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);
    });
    
    链接地址: http://www.djcxy.com/p/87788.html

    上一篇: C#将整数转换为十六进制并再次返回

    下一篇: jQuery:HEX到RGB计算在浏览器中有什么不同?