1.基本显示、隐藏效果
shou()/hide():
作用：通过同时改变元素的宽度和高度来实现显示或者隐藏
用法：$obj.show(执行时间，回调函数);
执行时间:slow,normal,fast或毫秒数
回调函数:动画执行完毕之后要执行的函数
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画效果-显示与隐藏</title>
<meta charset="utf-8" />
<script src="scripts/jquery-1.11.3.js"></script>
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background : pink;
display : none;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<br><br>
<div></div>
<script>
$("button:first").click(function(){
/*
* show()方法 - 显示
* * show()无参版本 - 不具有动画效果
* * show(speed,[callback])有参版本 - 具有
动画效果
* * speed - 设置动画执行的时长,单位为毫
秒
* * 三个预定义值 - slow|normal|fast
* * callback - 当动画执行完毕后的函数
*/
$("div").show('slow',function(){
});
});
$("button:last").click(function(){
/*
* hide()方法 - 隐藏
* * hide()无参版本 - 不具有动画效果
* * hide(speed,callback)有参版本 - 具有动
画效果
* * speed - 设置动画执行的时长,单位为毫
秒
* * 三个预定义值 - slow|normal|fast
* * callback - 当动画执行完毕后的函数
*/
$("div").hide(1000,function(){
});
});
</script>
</body>
</html>2.滑动式动画效果
slideDown()/slideUp()
作用：通过改变高度来实现显示或者隐藏的效果
用法同show()/hide()
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画效果-滑动效果</title>
<meta charset="utf-8" />
<script src="scripts/jquery-1.11.3.js"></script>
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background : pink;
display : none;
}
</style>
</head>
<body>
<button>slideDown</button>
<button>slideUp</button>
<br><br>
<div></div>
<script>
$("button:first").click(function(){
/*
* slideDown(speed,callback)方法 - 向下滑
动
* * API帮助文档 - 不允许不传递参数的
* * 经过实际测试,可以不传递参数
* * jQuery底层代码,指定默认时长
* * 参数
* * speed - 设置动画执行的时长
* * callback - 动画执行完毕后执行的函数
*/
$("div").slideDown(3000);
});
$("button:last").click(function(){
$("div").slideUp(3000);
});
</script>
</body>
</html>3.淡入淡出式动画效果
fadeIn()/fadeOut()
作用：通过改变不透明度opacity来实现显示或者隐藏
用法同show/hide
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画效果-淡入淡出</title>
<meta charset="utf-8" />
<script src="scripts/jquery-1.11.3.js"></script>
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background : pink;
display : none;
}
</style>
</head>
<body>
<button>fadeIn</button>
<button>fadeOut</button>
<br><br>
<div></div>
<script>
$("button:first").click(function(){
$("div").fadeIn(3000);
});
$("button:last").click(function(){
$("div").fadeOut(3000);
});
</script>
</body>
</html>4.创建自定义动画
animate()
用法:animate(js对象，执行时间，回调函数);
js对象：{}描述动画执行之后元素的样式
执行时间:毫秒数
回调函数:动画执行结束后要执行的函数
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画效果-自定义动画一</title>
<meta charset="utf-8" />
<script src="scripts/jquery-1.11.3.js"></script>
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background : pink;
position : relative;
top : 50px;
left : 10px;
}
</style>
</head>
<body>
<button>执行动画</button>
<br><br>
<div></div>
<script>
$("button").click(function(){
/*
* animate
(params,duration,easing,callback)
* * params - 设置动画执行的样式(CSS的属
性)
* * 写法 - { attrName : attrValue}
* * duration - 设置动画执行的时长,单位为毫
秒
* * 三种预定义值 - slow|normal|fast
* * easing - 要使用的擦除效果的名称(不使用
)
* * callback - 当动画执行完毕后的函数
*/
/* 并发效果 - 同时执行
$("div").animate({
"width" : 50,
"height" : 50
},3000);
*/
// 排队效果 - 按照先后顺序执行
$("div").animate({
"width" : 50
},3000).animate({
"height" : 50
},3000).animate({
"left" : 200
},3000).animate({
"top" : 200
},3000);
});
</script>
</body>
</html>例子2：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画效果-自定义动画二</title>
<meta charset="utf-8" />
<script src="scripts/jquery-1.11.3.js"></script>
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background : pink;
position : relative;
top : 50px;
left : 10px;
}
</style>
</head>
<body>
<button>执行动画</button>
<br><br>
<div></div>
<script>
$("button").click(function(){
/*
* animate(params,options)
* * params - 设置动画的样式(CSS属性)
* * 写法 - {attrName:attrValue}
* * options - 选项
* * 写法 - {name:value}
* * 选项
* * duration - 设置动画执行的时长
* * easing - 要使用的擦除效果的名称
* * complete - 动画执行完毕后的函数
* * queue - 设定为false将使此动画不进
入动画队列
*/
$("div").animate({
"width" : 50
},{
"duration" : 3000
}).animate({
"height" : 50
},{
"duration" : 3000,
"queue" : false
});
});
</script>
</body>
</html>切换例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery动画效果-切换动画</title>
<meta charset="utf-8" />
<script src="scripts/jquery-1.11.3.js"></script>
<style>
div {
width : 200px;
height : 200px;
border : solid 1px black;
background : pink;
position : relative;
top : 50px;
left : 10px;
}
</style>
</head>
<body>
<button>执行动画</button>
<br><br>
<div></div>
<script>
$("button").click(function(){
/*
* toggle(speed,callback)
* * speed - 设置动画执行的时长,单位为毫秒
*/
//$("div").toggle(3000);
//$("div").slideToggle(3000);
/*
* fadeTo(speed,opacity,callback)
* * speed - 设置动画执行的时长,单位为毫秒
* * opacity - 设置当前元素的透明度(0-1)
* * 0 - 透明
* * 1 - 不透明
*/
$("div").fadeTo(3000,0.5);
});
function move(){
$("div").slideToggle(3000,function(){
move();
});
}
move();
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
