jquery 动画

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1. 动画效果

* 显示与隐藏 - 通过同时改变高度和宽度实现显示与隐藏

* 显示 - show()

* 无动画版本 - show(),不传参数

* 有动画版本 - show(speed,callback)

* speed - 表示动画执行的时长,单位为毫秒

* 预定义三个速度 - slow,normal,fast

* callback - 表示动画执行完毕后的回调函数

* 隐藏 - hide()

* 无动画版本 - hide()

* 有动画版本 - hide(speed,callback)

* speed - 表示动画执行的时长,单位为毫秒

* 预定义三个速度 - slow,normal,fast

* callback - 表示动画执行完毕后的回调函数

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有动画显示与隐藏</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="button" id="start" value="显示">
<input type="button" id="stop" value="隐藏">
<div style="width:300px;height:300px;background:pink"></div>
<script>
$("#stop").click(function(){
$("div").hide(3000,function(){
alert("隐藏完毕！！");
});
});
$("#start").click(function(){
$("div").show(3000,function(){
alert("显示完毕！！")})
});
</script>
</body>
</html>

复制代码

效果：

点击隐藏：

点击显示：

* 滑动式动画效果 - 通过改变高度实现

* slideUp() - 向上滑动(隐藏)

* 允许不传递任何参数 - 具有动画效果

* slideUp(speed,callback)

* speed - 表示动画执行的时长,单位为毫秒

* 预定义三个速度 - slow,normal,fast

* callback - 表示动画执行完毕后的回调函数

* slideDown() - 向下滑动(显示)

* 允许不传递任何参数 - 具有动画效果

* slideDown(speed,callback)

* speed - 表示动画执行的时长,单位为毫秒

* 预定义三个速度 - slow,normal,fast

* callback - 表示动画执行完毕后的回调函数

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有动画显示与隐藏</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="button" id="start" value="显示">
<input type="button" id="stop" value="隐藏">
<div style="width:300px;height:300px;background:pink"></div>
<script>
$("#stop").click(function(){
$("div").slideUp(3000);
});
$("#start").click(function(){
$("div").slideDown(3000);
});
</script>
</body>
</html>

复制代码

效果：

点击隐藏：

点击显示：

* 淡入淡出 - 通过控制透明度实现

* fadeIn() - 淡入

* 允许不传递任何参数 - 具有动画效果

* fadeIn(speed,callback)

* speed - 表示动画执行的时长,单位为毫秒

* 预定义三个速度 - slow,normal,fast

* callback - 表示动画执行完毕后的回调函数

* fadeOut() - 淡出

* 允许不传递任何参数 - 具有动画效果

* fadeOut(speed,callback)

* speed - 表示动画执行的时长,单位为毫秒

* 预定义三个速度 - slow,normal,fast

* callback - 表示动画执行完毕后的回调函数

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有动画显示与隐藏</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="button" id="start" value="显示">
<input type="button" id="stop" value="隐藏">
<div style="width:300px;height:300px;background:pink"></div>
<script>
$("#stop").click(function(){
$("div").fadeOut(3000);
});
$("#start").click(function(){
$("div").fadeIn(3000);
});
</script>
</body>
</html>

复制代码

效果：

点击隐藏：

点击显示：

* 切换动画

* toggle() = show()+hide()

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画切换</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="button" id="start" value="切换">
<div style="width:300px;height:300px;background:pink"></div>
<script>
$("#start").click(function(){
$("div").toggle();
});
</script>
</body>
</html>

复制代码

效果：

点击切换：

再次点击切换：

* slideToggle() = slideUp()+slideDown()

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画切换</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<input type="button" id="start" value="切换">
<div style="width:300px;height:300px;background:pink"></div>
<script>
$("#start").click(function(){
$("div").slideToggle(1000);
});
</script>
</body>
</html>

复制代码

效果：

点击切换：

再次点击切换：

[代码片段] jquery 动画

[代码片段] jquery 动画

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫