jQuery slideDown()方法

jQuery slideDown()方法可以使元素以滑动的形式显示出来。下面是使用该方法的完整攻略：

语法

$(selector).slideDown(speed,callback);

参数说明

• selector: 必需，用于指定要执行滑动效果的元素。
• speed(可选): 设置滑动效果持续的时间，单位为毫秒(ms)，默认值为400。
• callback(可选): 滑动效果执行完毕后要执行的回调函数。

实例说明

以下是两个使用该方法的示例：

示例1

HTML代码：

<div class="box">
  <h3>标题</h3>
  <p>内容内容内容内容内容内容</p>
</div>

<button id="btn">点击展开</button>

CSS代码：

.box{
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  display: none;
}

JavaScript代码：

// 点击按钮展开内容区域
$("#btn").click(function(){
    $(".box").slideDown();
});

在上面的示例中，首先通过CSS设置了.box元素的样式，使其初始状态下不可见。然后在JavaScript代码中，当#btn按钮被点击时，.box元素会使用slideDown()方法被滑动地展示出来。

示例2

HTML代码：

<ul>
  <li><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
</ul>

CSS代码：

ul{
  padding:0;
  margin:0;
  list-style:none;
}
ul li{
  background-color:#f9f9f9;
  border-radius:3px;
  margin-bottom: 10px;
  padding: 10px;
  display: none;
}

JavaScript代码：

// 鼠标悬停时展开菜单
$("ul li").hover(function(){
    $(this).find("a").addClass("hover");
    $(this).find("div").slideDown("fast");
}, function(){
    $(this).find("a").removeClass("hover");
    $(this).find("div").slideUp("fast");
});

在上面的示例中，首先通过CSS设置了ul li元素的样式，使它们初始状态下不可见。然后在JavaScript代码中，当鼠标悬停在某个ul li元素上时，该元素中的div元素会被滑动地展示出来。当鼠标离开时，div元素会被滑动地隐藏起来。