jQuery的背景/文本颜色渐变 [英] Jquery Background / Text Color Fade

问题描述

下面我有一个jQuery脚本简单地淡入悬停背景颜色。同时根据需要后台褪色，文本淡入淡出以及我不想要的。理想情况下，我想只为背景色，而不是文字褪色。

任何帮助将是最AP preciated。感谢：）

jQuery的

  $（文件）。就绪（函数（）{    //锚链接不透明度设置为0，并开始悬停功能
    $（＃菜单采样菜单里了）。悬停（函数（）{        //渐变为1的不透明度为200毫秒的速度
        $（本）.fadeOut（0）.addClass（'悬停'）淡入（300）。        //在鼠标关闭
    }，函数（）{        //渐变为0的不透明度为100毫秒的速度
        $（本）.fadeOut（300）
            .queue（函数（）{
            $（本）.removeClass（'悬停'）。淡入（0）.dequeue（）
        }）;    }）;
}）;
 

HTML

 ＆LT; NAV ID =访问＆GT;
    ＆LT; UL ID =菜单样本菜单级=菜单＆GT;
        ＆LT;李ID =菜单项目-198级=菜单项菜单项型分类菜单项对象类别菜单项-198＆GT;＆LT; A HREF =HTTP：// www.threecell.com/demo/category/health-care-professional/\">Health护理专业与LT; / A＆GT;        ＆LT; /李＆GT;
        ＆LT;李ID =菜单项目-197级=菜单项菜单项型分类菜单项对象类别菜单项-197＆GT;＆LT; A HREF =HTTP：// www.threecell.com/demo/category/web-designer/\">Web设计师＆LT; / A＆GT;            ＆LT; UL类=子菜单中的＆GT;
                ＆LT;李ID =菜单项目-199级=菜单项菜单项型分类菜单项对象类别菜单项-199＆GT;＆LT; A HREF =HTTP：// www.threecell.com/demo/category/construction-worker/\">Construction工人＆下; / A＆GT;                ＆LT; /李＆GT;
            ＆LT; / UL＆GT;
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / NAV＆GT;
 

风格

  #access {
    填充：0 20px的;
    背景：＃111;
    的box-shadow：0 0 7px的RGBA（0，0，0，0.1）;
}#access UL {
    浮动：左;
    填充：0;
    保证金：0;
    列表样式：无;
    字体重量：600;
    文本转换：大写;
}#access李{
    位置：相对;
    浮动：左;
    填充：0;
    保证金：0;
}#access UL李：首先，孩子{
    填充左：0;
}#access一个{
    显示：块;
    填充：15px的24px的;
    颜色：＃F0F0F0;
    文字修饰：无;}＃菜单采样菜单里{
    颜色：黑色;
    文字阴影：0像素1px的4PX＃777;
    背景颜色：绿色;
    填充：12px的0 12px的0;
}＃菜单采样菜单里a.hover {
    背景：橙色;
}
#access li.current_page_item＆GT;一个，
#access li.current菜单项目＆GT;一个 {
    背景：橙色;
    颜色：白色;
    文字修饰：无;
}#access跨度{
    颜色：＃999;
    字体大小：11像素;
    字体样式：斜体;
    字体重量：正常;
    行高度：1.62em;
    文本转换：无;
}
 

解决方案

提供 jQuery的颜色动画插件，和动画的背景颜色属性。

I have a Jquery script below that simply fades in the background color on hover. While the background is fading as desired, the text is fading in and out as well which I don't want. Ideally, I'd like for only the background color to fade in and not the text.

Any help would be most appreciated. Thanks :)

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>

Style

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

解决方案

Include the jQuery color animation plugin, and animate the background-color property.

这篇关于jQuery的背景/文本颜色渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！