jquery - 在事件背景上添加淡入淡出效果

Question

我有一个菜单结构:

<ul id="nav">
    <li id="button1" class="active"><a href="#page-1" title="creative">creativ</a><
   <li id="button1"><a href="#page-1" title="creative">creativ</a></ul>

然后我在每个 .active 类中添加背景图片:

#nav li.active a{cursor:default;
                 background:url(images/nav-li-a_hover.png) no-repeat bottom center;
                 padding-bottom:5px;}

它正在工作。但是我想当我点击一个菜单项时，得到带有淡入淡出效果的背景图像。我怎样才能通过 jQuery 或 CSS3 做到这一点？

Answer 1

首先不要在不同的对象上使用相同的id，id必须是唯一的，使用class代替。还有一件事;不要忘记关闭 html 元素，您的 li 没有关闭。

更新:如果您只想将 bg 淡入，那么您应该将元素分开。在 a 中创建一个元素 s 并像这样操作它:

$('ul#nav li').click(function() {
    $(this).closest('s').hide().addClass('.active').fadeIn(500);
});

真正的 html:

<ul id="nav">
   <li class="button1 active"><a href="#page-1" title="creative">creativ<s></s></a></li>
   <li class="button1"><a href="#page-1" title="creative">creativ<s></s></a></li>
</ul>

CSS:

#nav li.active s {background:url(images/nav-li-a_hover.png) no-repeat bottom center;}