jQuery 褪色问题

Question

您好，我是 JQuery 的新手。我有两个我无法弄清楚的问题。由于时间紧迫，我正在使用复制和过去的代码。

1)当我将鼠标悬停在链接上时，一旦我将鼠标从链接上移开，它就不会变回原来的颜色。

2) 如果我在链接上快速移动鼠标，它们会卡在一个循环中并一遍又一遍地淡入淡出......我知道我应该能够使用 stop() 但是不知道这是否是我需要的。

// 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(){

        }
    );
});

更新：来自建议 - 解决了我的一些问题，但现在有时如果您将鼠标悬停在链接上，它不会消失。

// 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) 
        }
    );
});

Answer 1

不起作用，因为 .css("background-color") 以另一种颜色格式返回，例如：“rgb(18, 52, 86)”。

Answer 2

试试这个：

$("#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) 
        }
    );