自定义动画
jQuery提供了几种简单常用的固定动画方法我们使用，但有些时候，这些简单动画无法满足我们更加复杂的需求，这个时候，jQuery提供了一个.animate()方法来创建我们的自定义动画，满足更多复杂多变的要求。
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<input type="button" class="button" value="按钮" />
<div id="box">
box
</div>
</body>
</html>
style.css代码：
#box {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
jQuery代码：
$(".button").click(function() {
$("#box").animate({
width:"300px",
height:‘200px‘,
opacity:0.5,
fontSize:"50px"
});
});
注意：一个CSS变化就是一个动画效果，上面的例子中，已经有四个CSS变化，已经实现了多重动画同步运动的效果。
必传的参数只有一个，就是一个键值对CSS变化样式的对象。还有两个可选参数分别为速度和回调函数。
$(".button").click(function() {
$("#box").animate({
width:"300px",
height:‘200px‘,
opacity:0.5,
fontSize:"50px"
}, 2000, function() {
alert("动画执行完毕哟！");
});
});
到目前位置，我们都是创建的固定位置不动的动画，如果想要实现运动状态的位移动画，那就必须使用自定义动画，并且结合CSS的绝对定位功能。
$(".button").click(function() {
$("#box").animate({
left:"300px", //先必须设置CSS绝对定位
top:"200px"
},"slow");
});
自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画，jQuery提供了自定义动画的累加、累减功能。
$(".button").click(function() {
$("#box").animate({
left:"+=100px"
},"slow");
});
自定义实现列队动画的方式，有两种：
- 在回调函数中再执行一个动画
- 通过连缀或顺序来实现列队动画。
回调函数+列队动画(一定要细心，很容易写错)：
$(".button").click(function() {
$("#box").animate({
width:"300px"
}, function() {
$("#box").animate({
height:"200px"
}, function() {
$("#box").animate({
opacity:0.5
}, function() {
$("#box").animate({
fontSize:"50px"
});
});
});
});
});
在同一个元素的基础上，使用连缀调用，可以实现队列动画：
$(".button").click(function() {
$("#box").animate({width:"300px"})
.animate({height:‘200px‘})
.animate({opacity:0.5})
.animate({fontSize:"50px"});
});
在同一个元素的基础上，使用顺序排列调用，可以实现队列动画：
$(".button").click(function() {
$("#box").animate({width:"300px"});
$("#box").animate({height:‘200px‘});
$("#box").animate({opacity:0.5});
$("#box").animate({fontSize:"50px"});
});
注意：如果不是同一个元素，就会实现同步动画。
时间： 2024-10-09 23:52:06