Jquery背景/文本颜色淡入淡出

我有一个Jquery脚本，下面简单的淡出悬停的背景颜色。虽然背景根据需要正在消失，但是文本也是淡入淡出，而我却不想。理想情况下，我只想让背景颜色淡入，而不是文字。Jquery背景/文本颜色淡入淡出

任何帮助将不胜感激。谢谢:)

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

<nav id="access"> 
    <ul id="menu-sample-menu" class="menu"> 
     <li id="menu-item-198" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198"><a href="http://www.threecell.com/demo/category/health-care-professional/">Health Care Professional</a> 

     </li> 
     <li id="menu-item-197" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-197"><a href="http://www.threecell.com/demo/category/web-designer/">Web Designer</a> 

      <ul class="sub-menu"> 
       <li id="menu-item-199" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-199"><a href="http://www.threecell.com/demo/category/construction-worker/">Construction Worker</a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</nav>

风格

#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; 
}

来源

2013-08-28 user2325396

附上jQuery color animation plugin，和动画background-color财产。

来源

2013-08-28 04:02:04

嘿约瑟夫，thx的回应。我一定会试一试。在我做之前，为了尽量减少脚本，是否有一种方法可以在没有额外插件的情况下实现我所寻找的效果？ – user2325396

@ user2325396 - 您可以添加另一个绝对位置的元素来覆盖整个父元素，然后将其“z-index”设置为-1，以使其位于内容后面。你可以在你的JavaScript代码中淡入* *。 –

Thx的信息。如果我要使用颜色动画插件，您可以提供一些关于Jquery代码的样子吗？ – user2325396

Jquery背景/文本颜色淡入淡出

回答

相关问题