将淡入更改为幻灯片答案

【问题标题】：Change fadeIn to slide将淡入更改为幻灯片
【发布时间】：2013-01-15 14:08:00
【问题描述】：

我有一个菜单结构：

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

但是现在，我想换成幻灯片效果。我该怎么做？

【问题讨论】：

仅供参考，您的 li 元素缺少结束标签
@RoryMcCrossan 这是完全有效的语法，顺便说一句:) 但看起来很有趣。
@RoryMcCrossan 之前告诉他，id 应该是唯一的。 stackoverflow.com/a/14625806/1428241
@dfsq 语法无效，li 必须有 ol 或 ul 的直接父级。
@dfsq 好吧，也许它们在最严格的意义上是有效的，但是如果您在链接中向上滚动到第 3.2 节，它会在其中包含以下行：The appendix lists some SGML features that are not widely supported by HTML tools and user agents and should be avoided.

标签： jquery fadein slide fade

【解决方案1】：

使用slideUp方法

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

【讨论】：

【解决方案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>

【讨论】：

将fadeIn更改为slideDown，将fadeOut更改为slideUp