在浏览器网页时,我们经常可以看到各种带有滑动效果的下拉菜单。像绿叶学习网的主导航就是如此,如下图所示。

在jQuery中,如果想要实现元素的滑动效果,我们有以下2种方式。

  • (1)slideUp()和slideDown()
  • (2)slideToggle()

一、slideUp()和slideDown()

在jQuery中,我们可以使用slideUp()方法来实现元素的滑上效果,可以使用slideDown()方法来实现元素的滑下效果。一般情况下,slideUp()和slideDown()这两个方法都是配合一起使用的。

语法:

$().slideUp(speed, fn) $().slideDown(speed, fn)

说明:

speed是一个可选参数,表示动画的速度,单位为毫秒,默认为400毫秒。如果省略,则表示采用默认速度。speed有两种取值:一种是“字符串”;另外一种是“数值”,如下表所示。

speed取值为字符串
取值 说明
"fast" 200毫秒
"normal" 400毫秒(默认值)
"slow" 600毫秒

fn也是一个可选参数,表示动画执行完成后的回调函数。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width:300px;} h3 { text-align:center; padding:10px; background-color:#EEEEEE; } h3:hover { background-color:#DDDDDD; cursor:pointer; } p { background-color:#F1F1F1; padding:8px; line-height:24px; display:none; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { //设置一个变量flag用于标记元素状态,是“滑下”还是“滑上” var flag = 0; $("h3").click(function () { if (flag == 0) { $("p").slideDown(); flag = 1; } else { $("p").slideUp(); flag = 0; } }); }) </script> </head> <body> <div> <h3>绿叶学习网简介</h3> <p>绿叶学习网成立于2015年4月1日,是一个最富有活力的Web技术学习网站。在这里,我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点,都体现绿叶精品的态度。没有最好,但是我们可以做到更好!</p> </div> </body> </html>

浏览器预览效果如下图所示。

分析:

对于滑动动画,我们都是需要定义一个变量来标识当前元素的滑动状态,然后根据这个变量值判断是执行滑上效果,还是滑下效果。

二、slideToggle()

在jQuery中,我们还可以使用slideToggle()方法来“切换”元素的滑动状态。也就是说,如果元素是滑下状态,则会滑上;如果元素是滑上状态,则会滑下。

语法:

$().slideToggle(speed, fn)

说明:

speed是一个可选参数,表示动画的速度,单位为毫秒,默认为400毫秒。如果省略,则表示采用默认速度。speed有两种取值:一种是“字符串”;另外一种是“数值”,如下表所示。

speed取值为字符串
取值 说明
"fast" 200毫秒
"normal" 400毫秒(默认值)
"slow" 600毫秒

fn也是一个可选参数,表示动画执行完成后的回调函数。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width:300px;} h3 { text-align:center; padding:10px; background-color:#EEEEEE; } h3:hover { background-color:#DDDDDD; cursor:pointer; } p { background-color:#F1F1F1; padding:8px; line-height:24px; display:none; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("h3").click(function(){ $("p").slideToggle(); }) }) </script> </head> <body> <div> <h3>绿叶学习网简介</h3> <p>绿叶学习网成立于2015年4月1日,是一个最富有活力的Web技术学习网站。在这里,我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点,都体现绿叶精品的态度。没有最好,但是我们可以做到更好!</p> </div> </body> </html>

浏览器预览效果如下图所示。

分析:

对于滑动效果,如果使用slideUp()和slideDown()来实现,我们需要定义一个变量来标识滑动状态。如果使用slideToggle(),则不需要多此一举。