Hi I'm new to JQuery. I have an two issues that I can't figure out. I'm using copy and past code as I'm on a tight deadline.
1) When I hover over a link it doesn't fade back to the original color once I move my mouse away from the link.
2) If I move my mouse rapidly over the links they get stuck in a loop and fade in and out over and over... I know I should be able to use stop() but not sure if thats what I need.
// JavaScript Document
$(document).ready(function() {
//Grab the original BG color of the link
var originalBG = $("#nav li a").css("background-color");
//The color you want to fade too
var fadeColor = "#FFFFFF";
//Now animate on links with class = animate
$("#nav li a").hover(
function() {
$(this)
//Fade to the new color
.animate({backgroundColor:fadeColor}, 350)
//Fade back to original color
.animate({backgroundColor:originalBG}, 350)
},
function(){
}
);
});
update: from suggestions - Resolved some of my issues, but now some times if you hover over a link it doen't fade.
// JavaScript Document
$(document).ready(function() {
//Grab the original BG color of the link
var originalBG = "#351411";
//The color you want to fade too
var fadeColor = "#FFFFFF";
//Now animate on links with class = animate
$("#nav li a").hover(
function() {
//Fade to the new color
$(this).stop().animate({backgroundColor:fadeColor}, 350)
},
function(){
//Fade back to original color
$(this).stop().animate({backgroundColor:originalBG}, 350)
}
);
});