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

我在active类上添加了fadeIn效果。

$('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>