1）slideDown(speed,callback)：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
这里的 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
我们看看下面代码
$("#slideDown").slideDown("slow",function(){alert("是不是下面这个层滑动显示了！")});
当然我们可以设置速度
$("#slideDown").slideDown("normal",function(){alert("是不是下面这个层滑动显示了！")});//正常速度
$("#slideDown").slideDown("fast",function(){alert("是不是下面这个层滑动显示了！")});//快速
$("#slideDown").slideDown(3000,function(){alert("是不是下面这个层滑动显示了！")});//显示一共用3秒显
2）slideToggle(speed,callback)：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
我们看看下面代码
$("#slideToggle").slideToggle("slow",function(){alert("hello！")});
这个东西实际上就是 slideDown slideUp 的集合体 如果元素当前可见 则 滑动隐藏 如果当前元素已经隐藏则滑动显示
3）slideUp(speed, callback)：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
与slideDown用法相同..只不过就是效果都是反的
例子
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery基础教程六(滑动效果函数之slideDown,slideToggle和slideUp)</title>
<script language="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>
<style>
.redborder{border:2px dashed #ff0000 }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
$("div").addClass("redborder");
$("#slideDown1").click(function(){
$("#slideDown").slideDown("slow",function(){});
})
$("#slideDown2").click(function(){
$("#slideDown").slideToggle("slow",function(){});
})
})
//-->
</SCRIPT>
</head>
<body>
<INPUT TYPE="submit" ID="slideDown1" value="slideDown1"><INPUT TYPE="submit" ID="slideDown2" value="slideDown2">
<div ID=slideDown style="display:none"> <br />点击slideDown将执行<br />
</div>
</body>
</html>
分享到：
相关推荐
slideToggle和slideup是jQuery中的两个函数，经常被用来实现折叠菜单效果。下面我们将详细介绍如何使用这两个函数来实现手机端折叠菜单效果。 一、HTML结构 在HTML结构中，我们需要创建一个容器，里面包含了折叠...
jQuery 拥有以下滑动方法： slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换。 jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素。 ...
这通常涉及到JavaScript或jQuery中的几个关键函数，如`slideUp()`, `slideDown()` 和 `slideToggle()`。这些方法是jQuery库提供的强大功能，用于创建平滑的动画效果，使元素以滑动的方式显示或隐藏。在这篇文章中，...
通过这段文档中的代码和解释，我们可以清晰地了解到如何利用 jQuery 中的 slideUp 和 slideDown 方法以及 slideToggle 方法来实现简单的动画效果，并且通过点击事件来控制这些动画的触发。这些知识点对于初学 jQuery...
总结，jQuery 实现滑动效果的核心在于理解并应用 `.slideUp()`, `.slideDown()`, 和 `.slideToggle()` 方法。通过结合其他 jQuery 功能和适当的自定义设置，我们可以创建出丰富多样的滑动交互，提升用户体验。在实际...
除了`slideDown()`和`slideUp()`，还有`slideToggle()`方法，它结合了两者的效果。当点击带有`id="btnToggle"`的按钮时，`$("#message").slideToggle(1000);`会根据元素当前的状态来决定是展开还是收起。如果元素是...
它的工作方式类似于jQuery的slideToggle（），slideDown（）和slideUp（），但不使用display：none。 使用CSS3过渡和element.scrollHeight设置高度未知的元素的高度的动画。 也是一回事。 特征： 滑动高度已知或...
3. **jQuery交互**：当用户鼠标悬停在某个菜单项上时，使用`.slideDown()`或`.slideToggle()`方法展开下拉菜单，鼠标离开时使用`.slideUp()`收起菜单。 4. **跟随动画**：如果要实现菜单跟随鼠标滑动的效果，可以...
总的来说，jQuery的slide UP和slide DOWN方法是实现网页元素上下滑动动画效果的简单而有效的方法。通过合理使用这些方法，可以极大地增强网页的交互体验和视觉效果。在学习jQuery的过程中，理解和掌握这些基础动画...
总的来说，jQuery的列表滑动效果是一种常见的网页动态效果，通过结合`slideUp()`, `slideDown()`和`slideToggle()`方法，以及适当的DOM操作，可以轻松实现。在实际开发中，我们还需要考虑用户体验、性能优化和兼容性...
通过调整CSS属性（如`top`、`left`、`width`、`height`等）和使用`.slideDown()`, `.slideUp()`或`.slideToggle()`方法，可以实现这种平滑过渡效果。 3. **导航菜单**：导航菜单是网站布局的重要组成部分，用于帮助...
2. **动画方法**：jQuery提供了一系列的动画方法，如`.slideToggle()`, `.slideUp()`, `.slideDown()`等，用于实现滑动效果。这些方法不仅简单易用，还可以接受时间参数来控制动画速度。 3. **自定义动画**：如果...
《jQuery效果滑动卷动与淡入淡出详解》 jQuery作为一款强大的JavaScript库，深受开发者喜爱，尤其在实现页面动态效果方面表现出色。本文将深入探讨jQuery中的两种常见动画效果——滑动卷动（Slide）和淡入淡出...
jQuery的`slideToggle()`, `slideUp()`, `slideDown()`等方法可以实现这些效果。这些方法能够以动画形式改变元素的高度或可见性，使得页面变化更为流畅和吸引人。例如，一个常见的应用场景是在导航菜单中，当用户...
4. **jQuery 和其他库**：jQuery等JavaScript库提供了便利的动画API，简化了动画的编写，如`.slideToggle()`、`.slideUp()`和`.slideDown()`等方法。 在`demo.html`文件中，可能包含了实现js滑动效果的HTML结构、...
本文实例讲述了jQuery滑动效果实现方法。分享给大家供大家参考，具体如下： jQuery 滑动方法： 1.slideDown()方法：用于向下滑动元素 语法： $(selector).slideDown(speed,callback); 2.slideUp()方法：用于向上...
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。 $(selector).slide(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是滑动...
3. **动画效果**：在事件处理函数中，使用`.slideUp()`、`.slideDown()`、`.slideToggle()`等方法实现滑动效果。这些方法可以配合`duration`参数设置动画速度，`easing`参数调整动画缓动函数，以实现更加平滑的过渡...