将fadeIn更改为幻灯片

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

使用slideUp方法

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

Answer 2

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