您的位置：首页 > Web前端 > JQuery

jQuery 入门教程(7): 滑动效果

2013-09-27 00:00 295 查看

jQuery支持使用下面方法来实现HTML元素的滑动效果：

slideDown()

slideUp()

slideToggle()

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

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

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideDown()方法结束后调用。

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

[html]
view plain
copy
print
?

<!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>

<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>

</body>

</html>

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

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

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideUp()方法结束后调用。

[javascript]
view plain
copy
print
?

$("#flip").click(function(){

$("#panel").slideUp();

});

slideToggle方法
用来实现交替显示向上向下滑动动画效果，如果之前是下滑显示，slideToggle则显示slideUp(),反之显示slideDown
其基本语法为：

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

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideUp()方法结束后调用。

[javascript]
view plain
copy
print
?

$("#flip").click(function(){

$("#panel").slideToggle();

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航