Question

My code looks like this:

quickbarcolor = $("#quick-bar a").css("color");
$("#quick-bar a").hover(function () {
  if ($(this).css("color") != quickbarcolor) quickbarcolorhover = $(this).css("color");
 V$(this).animate({ color: quickbarcolorhover },400);
}, function() {
  $(this).animate({ 'color': quickbarcolor},400)}  
);

It works fine but it depends on global variables to share the colors between the two functions in hover(). I don’t know everything about global vars but I thought it was better to avoid them unless necessary, though I know that sharing values between functions is what they are for. Still I’d like to see if anyone knows a better way of doing this.

Answer 1

One option is to store your values on the DOM element being animated using the data-* attribute. Here’s what I mean by that:

$.data($("#quick-bar a"), "col", $("#quick-bar a").css("color"));

$("#quick-bar a").hover(function() {
    var self = $(this);
    var col = $.data(self, "col");
    if ($(this).css("color") != col) {
         $.data(self, "col", self.css("color"));
    }

    self.animate({
        color: col
    }, 400);

    $.data(self, "col", self.css("color");
}, function() {
    $(this).animate({
        'color':  $.data($(this), "col");
    }, 400)
});​