Jquery Hover Class Fade with Background Image

Question

我在下面有以下 Jquery 脚本，它在翻转时添加了一个 .hover 类，然后在推出时将其删除。目前，背景（无论是图像还是颜色）都可以很好地淡入淡出。但是，我不希望菜单文本淡入淡出。

我知道 CSS3 淡入淡出过渡和 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="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="category/construction-worker/">Construction Worker</a>

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

风格

#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-color: orange;
    background-image: url(images/over.jpg);

}

Answer 1

Xarcell 的答案可能是最简单的。如果您希望使用 JavaScript 来完成此操作，一种选择是使用 JQuery-UI，它具有包含转换的 addClass 和 removeClass 函数。

基本上，HTML 和 CSS 与上面相同，但 JS 如下所示：

$(document).ready(function () {

//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function () {
    //Fade 'hover' class in at 300ms
    $(this).addClass('hover', 300);
    //On mouse-off
}, function () {
        //Fade 'hover' class out at 300ms
        $(this).removeClass('hover', 300);
   });
});

当然，您还必须包含 JQuery-UI（我通常使用 Cloud Flair 的 CDNJS）：

http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

就个人而言，如果我已经在使用 JQuery-UI，我会使用这种方法。否则，我会选择 Xarcell 的解决方案。

Answer 2

您可以在没有 javascript 的情况下执行此操作：http://jsfiddle.net/WjrnB/1/

简单使用：

#menu-sample-menu li a:hover {
    background-color: orange;
    background-image: url(images/over.jpg);

}

而不是

#menu-sample-menu li a.hover {
    background-color: orange;
    background-image: url(images/over.jpg);

}

并添加：

#menu-sample-menu li a {
    -khtml-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}