某类悬停FadeOut

Question

我正在做一个导航条，上面有图像，还有链接。当用户悬停这些链接时，它会将背景更改为导航条悬停的图像，并通过CSS的背景位置属性指定其位置。现在，我想让我的网站上的所有链接淡出，用一个.CLASS:hover插件慢慢显示jQuery图像。我的代码是：

HTML：

<div class="navbar"><!-- NavBar Start -->
        <a href="#" class="nav_l_home" title="Home"></a>
        <a href="#" class="nav_l_services" title="Services"></a>
</div><!-- NavBar End -->

CSS：

.navbar {
    background:url(../img/nav.png) no-repeat;
    width:828px;
    height:72px;
    margin:auto;
    position:relative;
}
a.nav_l_home {
    width:112px;
    height:43px;
    position:absolute;
    bottom:14px;
    right:30px;
}
a.nav_l_home:hover {
    background:url(../img/nav_hov.png) no-repeat;
    background-position: -686px -15px;
}
a.nav_l_services {
    width:107px;
    height:43px;
    position:absolute;
    bottom:14px;
    right:161px;
}
a.nav_l_services:hover {
    background:url(../img/nav_hov.png) no-repeat;
    background-position: -560px -15px;
}

对于不好的外植体^-^“，我只想让a.nav_l_home:hover背景在鼠标悬停时淡入，仅此而已。

Answer 1

如果您想让元素淡入并在鼠标上淡出/鼠标退出，您可以这样做：

$('.foo').hover(

    function() {
        $('#bar').fadeIn();
    },

    function () {
        $('#bar').fadeOut();
    }

);

.hover()接受两个参数:调用mouseover的函数和对mouseout调用的函数。方法.fadeIn()和.fadeOut()是不言自明的。您可以通过将毫秒数(整数)作为参数来调整淡出效果的持续时间。