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

我在课堂上添加了fadeIn效果。active

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

但是现在，我想更改为幻灯片效果。我怎样才能做到这一点？

Answer 1

将fadeIn 更改为slideDown 并将fadeOut 更改为slideUp 一个有效的dom 将是

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

Answer 2

使用 slideUp 方法

$(this).hide().addClass('.active').slideUp();