Jquery背景/文本颜色淡化

我在下面有一个Jquery脚本，只是在hover时淡化背景颜色。 虽然背景正如所希望的那样褪色，但文字正逐渐消失，这是我不想要的。 理想情况下，我只希望背景颜色淡入，而不是文本。

非常感激任何的帮助。 谢谢 ：）

jQuery的

$(document).ready(function () { //Set the anchor link opacity to 0 and begin hover function $("#menu-sample-menu li a").hover(function () { //Fade to an opacity of 1 at a speed of 200ms $(this).fadeOut(0).addClass('hover').fadeIn(300); //On mouse-off }, function () { //Fade to an opacity of 0 at a speed of 100ms $(this).fadeOut(300) .queue(function () { $(this).removeClass('hover').fadeIn(0).dequeue() }); }); }); 

HTML

 
 
 
Health Care Professional 
 
Web Designer 
 
Construction Worker 
 
 
 
  

样式

 #access { padding:0 20px; background:#111; box-shadow:0 0 7px rgba(0, 0, 0, .1); } #access ul { float:left; padding:0; margin:0; list-style:none; font-weight:600; text-transform:uppercase; } #access li { position:relative; float:left; padding:0; margin:0; } #access ul li:first-child { padding-left:0; } #access a { display:block; padding:15px 24px; color:#f0f0f0; text-decoration:none; } #menu-sample-menu li { color: black; text-shadow: 0px 1px 4px #777; background-color: green; padding: 0 12px 0 12px; } #menu-sample-menu li a.hover { background: orange; } #access li.current_page_item > a, #access li.current-menu-item > a { background: orange; color: white; text-decoration:none; } #access a span { color:#999; font-size:11px; font-style:italic; font-weight:normal; line-height:1.62em; text-transform:none; } 

Answer 1

包含jQuery颜色动画插件 ，并为background-color属性设置动画。