jQuery动画分为内置动画和自定义动画
内置动画: 显示show()、隐藏hide()、显示隐藏切换toggle()、上拉slideUp()、下拉slideDown()、上拉下拉切换slideToggle()、淡入fadeIn()、淡出fadeOut、淡入淡出切换fadeToggle()、透明度fadeTo()
自定义动画: animate()
内置动画
1.显示show()、隐藏hide()、显示隐藏切换toggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示隐藏</title>
<style type="text/css">
#box{width: 100px;height: 100px;background-color: red;position: absolute;}
</style>
</head>
<body>
<input type="button" id="btn1" value="隐藏" />
<input type="button" id="btn2" value="显示" />
<input type="button" id="btn3" value="隐藏/显示" />
<div id="box"></div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
//隐藏
$("#btn1").click(function(){
$("#box").hide(200,"linear",function(){
alert("动画结束了")
});
})
//显示
$("#btn2").click(function(){
$("#box").show(300);
});
//显示隐藏切换
$("#btn3").click(function(){
$("#box").toggle();
});
</script>
</html>
- hide(参数1,参数2,参数3)
- show(参数1,参数2,参数3)
- toggle(参数1,参数2,参数3)
- 参数1(可选):毫秒数;参数2(可选):运动类型;参数3(可选):回调函数
2.上拉slideUp()、下拉slideDown()、上拉下拉切换slideToggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上拉下拉</title>
<style type="text/css">
#box{width: 100px;height: 100px;background-color: red;position: absolute;}
</style>
</head>
<body>
<input type="button" id="btn4" value="上拉" />
<input type="button" id="btn5" value="下拉" />
<input type="button" id="btn6" value="上拉/下拉" />
<div id="box"></div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
//上拉
$("#btn4").click(function(){
$("#box").slideUp(300,"linear",function(){
alert("动画结束了")
});
});
//下拉
$("#btn5").click(function(){
$("#box").slideDown(300);
});
//上拉下拉切换
$("#btn6").click(function(){
$("#box").slideToggle();
});
</script>
</html>
- slideUp(参数1,参数2,参数3)
- slideDown(参数1,参数2,参数3)
- slideToggle(参数1,参数2,参数3)
- 参数1(可选):毫秒数;参数2(可选):运动类型;参数3(可选):回调函数
3.淡入fadeIn()、淡出fadeOut、淡入淡出切换fadeToggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<style type="text/css">
#box{width: 100px;height: 100px;background-color: red;position: absolute;}
</style>
</head>
<body>
<input type="button" id="btn7" value="淡入" />
<input type="button" id="btn8" value="淡出" />
<input type="button" id="btn9" value="淡入/淡出" />
<div id="box"></div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
//淡入
$("#btn7").click(function(){
$("#box").fadeIn(300);
});
//淡出
$("#btn8").click(function(){
$("#box").fadeOut(300,"linear",function(){
alert("动画结束了")
});
});
//淡入淡出切换
$("#btn9").click(function(){
$("#box").fadeToggle();
});
</script>
</html>
- fadeIn(参数1,参数2,参数3)
- fadeOut(参数1,参数2,参数3)
- fadeToggle(参数1,参数2,参数3)
- 参数1(可选):毫秒数;参数2(可选):运动类型;参数3(可选):回调函数
4.透明度fadeTo()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度</title>
<style type="text/css">
#box{width: 100px;height: 100px;background-color: red;position: absolute;}
</style>
</head>
<body>
<input type="button" id="btn10" value="有点透明">
<div id="box"></div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
//透明度
$("#btn10").click(function(){
$("#box").fadeTo(1000,0.3);
});
</script>
</html>
- fadeTo(参数1,参数2,参数3,参数4)
- 参数1:毫秒;参数2:透明度;参数3(可选):运动类型;参数4(可选):回调函数。
自定义动画
1.自定义动画animate()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style type="text/css">
#box1{width: 100px;height: 100px;background-color: red;position: absolute;}
</style>
</head>
<body>
<input type="button" id="btn1" value="自定义动画">
<div id="box1"></div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
//自定义动画
$("#btn1").click(function(){
$("#box1").animate({
width:0,
height:0,
top:330,
left:210
},3000,function(){console.log("动画结束")});
});
</script>
</html>
- animate(参数1,参数2,参数3,参数4)
- 参数1:对象,设置属性与属性值;参数2(可选):毫秒;参数3(可选):运动类型;参数4(可选):回调函数
2.自定义动画连缀效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画连缀</title>
<style type="text/css">
#box2{width: 100px;height: 100px;background-color: blue;position: absolute;}
</style>
</head>
<body>
<input type="button" id="btn2" value="自定义动画连缀">
<div id="box2"></div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
//自定义动画连缀效果
$("#btn2").click(function(){
$("#box2").animate({
width:200,
height:200
}).animate({
left:400,
top:300
},2000);
});
</script>
</html>