jQuery入门（7）滑动效果

jQuery入门（7）滑动效果2013-05-22 引路蜂移动软件 jQuery支持使用下面方法来实现HTML元素的滑动效果：

slideDown（）

slideUp（）

slideToggle（）

slideDown方法

用来实现向下滑动动画效果，其基本语法为：

$（selector）.slideDown（speed,callback）;

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个可选参数为回调函数，在slideDown（）方法结束后调用。

下面例子点击按钮#panel 将采用下滑方式显示出来：

<！DOCTYPE html> <html> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js"></script> <script> $（document）.ready（function （） { $（"#flip"）.click（function （） { $（"#panel"）.slideDown（"slow"）; }）; }）; </script><style type="text/css"> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; }#panel { padding: 50px; display: none; } </style> </head> <body><center id="flip">Click to slide down panel</center> <center id="panel">Hello world！</center></body> </html>

slideUp方法

用来实现向上滑动动画效果，其基本语法为：

$（selector）.slideUp（speed,callback）;

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个可选参数为回调函数，在slideUp（）方法结束后调用。

$（"#flip"）.click（function（）{ $（"#panel"）.slideUp（）; }）;

slideToggle方法

用来实现交替显示向上向下滑动动画效果，如果之前是下滑显示， slideToggle则显示slideUp（）,反之显示slideDown

其基本语法为：

$（selector）.slideToggle（speed,callback）;

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个可选参数为回调函数，在slideUp（）方法结束后调用。

$（"#flip"）.click（function（）{ $（"#panel"）.slideToggle（）; }）;

首页 / 脚本样式 / jQuery / jQuery入门（7） 滑动效果

首页 / 脚本样式 / jQuery / jQuery入门（7）滑动效果