Incorrectly embedded jQuery variable

Question

the callback function here isn't working. I think I'm using the startColor variable incorrectly.

note: This requires jQuery UI.

$("a").hover(function() { 
    var startColor = $(this).css("color");
    $(this).stop().animate({ color: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ color: " + startColor + "}, 350);
});

Thanks guys. I was actually trying to refactor this code:

$("nav ul li a, aside ul li a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
    },function() {  
    $(this).stop().animate({ color: "#5944b2"}, 350);  //Start color
});
$("h5#logo a, button").hover(function() {  
    $(this).stop().animate({ backgroundColor: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ backgroundColor: "#000000"}, 350);
});
    $("h3 a").hover(function() {  
    $(this).stop().animate({ color: "#54a888"}, 350);
    },function() {  
    $(this).stop().animate({ color: "#000000"}, 350);
});

I have different starting colors and different properties that I want to animate. Seems like there's a better solution than repeating the same code 3 times.

Answer 1

Declare it outside the two functions, and remove the " + + "

var startColor;

$("a").hover(function() { 
    startColor = $(this).css("color");
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
}); 

...or better yet, use .data() to remember the color for that particular element:

$("a").hover(function() { 
    if( !$(this).data( 'startColor' ) ) {
        $(this).data( 'startColor', $(this).css("color") );
    }
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: $(this).data('startColor')}, 350);  
}); 

...or if the color happens to be the same for all the links, just get it once, and reuse that value. It may actually be safer since you're dealing with an animation.

var startColor = $(a).css("color");

$("a").hover(function() { 
    $(this).stop().animate({ color: "#54a888"}, 350);  //End color
},function() {  
    $(this).stop().animate({ color: startColor}, 350);  //Start color  
}); 

---

EDIT: Based on your updated question, it looks like you're trying to do a little code reduction. Seems like there's enough difference between them that trying to consolidation would be complicated enough that you may end up with more code.

One way to reduce would be to change your hover() handlers to accept 1 function instead of 2:

$("h3 a").hover(function( e ) {  
    $(this).stop().animate({ color: e.type == 'mouseenter' ? "#54a888" : "#000000"}, 350);
});

Shortens it up a bit.

Another option (since you're using jQueryUI I assume) would be to animating a toggleClass (though I think it may be broken in the latest version of UI).

$("h3 a,nav ul li a, aside ul li a,nav ul li a, aside ul li a").hover(function( e ) {  
    $(this).stop().toggleClass('hover', 350);
});

Then in CSS:

h3 a.hover {
    color:#000000;
}

nav ul li a.hover, aside ul li a.hover {
    color:#54a888;
}

// etc...

...just be aware again that I think it may be broken in the latest version, and you'll need to test because it can sometimes be flakey.

Answer 2

The " + + " doesn't make sense. Just use

$(this).stop().animate({ color: startColor}, 350);  //Start color  });  

Answer 3

You're creating a local variable in one callback and trying to use it in the other.

Instead, you should store the old color using $.data.
Also, don't put quotes around the variable; that makes it into a string.