views:

33

answers:

2

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) 
        }
    );
});
+1  A: 

Try this :

$("#nav li a").hover( 
    function() { 

                //Fade to the new color
                $(this).animate({backgroundColor:fadeColor}, 350)

        }, 
    function(){
                //Fade back to original color
                $(this).animate({backgroundColor:originalBG}, 350) 
        }
    );
Soufiane Hassou
This helped a little. Now some times if you hover over a link it doen't fade in or out.
Thorn007
'some times' mean when you hover in/out quickly, no ?
Soufiane Hassou
yes, mostly in FF.. could this be performance?
Thorn007
Maybe setting a timeout and clearing it on mouseout would solve your problem.
Soufiane Hassou
+1  A: 

Doesn't work because the .css("background-color") returns in another color format, some like this: "rgb(18, 52, 86)".

Cesar
The solution of @Soufiane Hassou maybe works. But I don't know if "animate" accept this format: "rgb(18, 52, 86)". Try ;)
Cesar
changed to hex and it worked.
Thorn007