Question

I’m stuck with a function that doesn’t want to animate…

I’m using the latest jQuery Color Plugin to enable color animations. Now, what should happen in the following code is that (when it works of course):

(1) the user selects a colour,
(2) based on the RGB value of that colour we create a lighter shade of that color,
(3) when hovering over a link, it’s colour is replaced by the newly calculated colour,
(4) when moving off the link, the original colour should be animated in.

The colour substitution work absolutely fine, but the animation doesn’t as it currently looks more like a traditional CSS hover effect than one done over 800msecs with jQuery.

If the Ninja’s out there can help me out, I’d be more than willing to shine your throwing stars for a week :). Here’s the code:

$('a').hover(function() {
//code when hover over
$oldColour = $(this).css('color');

    $(this).animate({'color': $(this).css('color', function(i, v){
      var rgb = getRGB($(this).css('color'));

      for(var i = 0; i < rgb.length; i++){
        rgb[i] = (rgb[i] + 60 < 255) ? rgb[i] + 60 : 255;
      }

      var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
      return  newColor;

      }) //end anonymous function
    }, 800); //end animate


    }, function() {
      //code when hovering away
      $(this).animate({'color': $(this).css('color', $oldColour)}, 800);
    });

Your help, as always, is awesome and greatly appreciated!
Thank yous (and girls, of course) for taking a look 🙂

PS To see a live example, go to demo page and hover over any link…

===== UPDATE: And more Help needed =====
Cambraca’s code underneath works perfectly. Except that in IE it first fades to a very dark colour, then returns to the initial colour when I mouse off, and then when I hover over it again, the correct recalculated colour displays…

Any ideas on how to solve this for IE?

Answer 1

Try this

var $oldColour;

$('a').hover(function() {
    //code when hover over
    $oldColour = $(this).css('color');
    var rgb = getRGB($(this).css('color'));
    for (var i = 0; i < rgb.length; i++)
        rgb[i] = Math.min(rgb[i] + 60, 255);
    var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    $(this).animate({'color': newColor}, 800);
}, function() {
    //code when hovering away
    $(this).animate({'color': $oldColour}, 800);
});