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.
Declare it outside the two functions, and remove the
" + + "
...or better yet, use
.data()
to remember the color for that particular element:...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.
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: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).Then in CSS:
...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.