0

我有以下 Jquery Color Fade 脚本，它在“rollover”上引入了悬停类，然后在“rollout”上将其删除。目前，文本和背景都淡入淡出。理想情况下，使用这种性质的脚本，我希望只有背景或背景图像在文本保留时淡入。我知道使用颜色 Jquery 插件的背景颜色渐变选项。但是，当我也使用背景图像时，我希望它能够工作。这就是我希望调整现有脚本的原因。任何有关如何仅使背景（无论是颜色还是图像）淡入的帮助将不胜感激。

jsfiddle：http: //jsfiddle.net/RV6fE/3/

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

1 回答 1

1

您可以在 li 内添加一个额外的跨度，使用相同的文本，如下所示 

<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">
         <span>Health Care Professional</span>
        <a href="http://www.threecell.com/demo/category/health-care-professional/">Health Care Professional</a>


    </li>
 //...    
</ul>

http://jsfiddle.net/RV6fE/13/
选项 2
您可以使用 CSS3 过渡仅更改背景http://jsfiddle.net/RV6fE/14/
选项 3
如果您想淡化背景图像而不重复文本或改变html你可以用jQuery创建一个空元素，只改变背景并像这样淡化它 

<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>

在 $(document).ready 之后你得到 

<li id="menu-item-198" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-198">
    <span style="display: block;" class=""></span>
    <a href="http://www.threecell.com/demo/category/health-care-professional/">Health Care Professional</a>
</li>

js 

$(document).ready(function () {
$("#menu-sample-menu li").each(function(){ //add the empty span with the background
    $(this).prepend("<span>");
});
$("#menu-sample-menu li").hover(function () {
    $(this).children("span").fadeOut(0).addClass('hover').fadeIn(300);
}, function () {
    $(this).children("span").fadeOut(300)
        .queue(function () {
        $(this).removeClass('hover').fadeIn(0).dequeue()
    });
});
});

http://jsfiddle.net/RV6fE/15/

于 2013-08-29T22:44:04.360 回答