动画效果(二)
自定义动画
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"});
});
注意：如果不是同一个元素，就会实现同步动画。如何证明之呢？
看以下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> <div id="pox"> pox </div> </body> </html>
style.css：
#box { width: 100px; height: 100px; background: red; position: absolute; } #pox { width: 100px; height: 100px; background: green; position: absolute; top:150px; }
jQuery代码如下：
$(".button").click(function() {
$("#box").animate({width:"300px"});
$("#pox").animate({height:'200px'});
$("#box").animate({opacity:0.5});
$("#pox").animate({fontSize:"50px"});
});
可以发现：box的第一条和第三条是列队动画，pox的第二条和第四条是列队动画，box的第一条和pox的第二条是同步动画，box的第三条和pox的第四条是同步动画。
如何才能实现同步动画呢？只能用回调函数来实现了，代码如下：
$(".button").click(function() {
$("#box").animate({
width:"300px"
}, function() {
$("#pox").animate({
height:"200px"
}, function() {
$("#box").animate({
opacity:0.5
}, function() {
$("#pox").animate({
fontSize:"50px"
});
});
});
});
});
补充：在.animate()方法中，还有一个参数，easing运动方式，这个参数，大部分参数值需要通过插件来使用，在后面的课程中，会详细讲解，自带的参数有两个：swing(缓动)、linear(匀速)，默认为swing。
举例说明：
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="按钮" /> <input type="button" class="stop" value="停止" /> <input type="button" class="ani" value="查找运动的动画" /> <div id="box"> box </div> <div id="pox"> pox </div> </body> </html>
style.css：
#box { width: 100px; height: 100px; background: red; position: absolute; } #pox { width: 100px; height: 100px; background: green; position: absolute; top:150px; }
jQuery代码如下：
$(".button").click(function() {
$("#box").animate({
left:"800px"
}, 3000, "swing", function() {});
$("#pox").animate({
left:"800px"
}, 3000, "linear");
});
列队动画方法
之前我们已经可以实现列队动画了，如果是同一个元素，可以依次顺序或连缀调用；如果是不同元素，可以使用回调函数，但有时列队动画太多，回调函数的可读性大大降低。 为此，jQuery提供了一组专门用于列队动画的方法。
html(部分)代码：
<input type="button" class="button" value="按钮" /> <div id="box"> box </div>
style.css：
#box { width: 100px; height: 100px; background: red; position: absolute; }
jQuery代码如下：
$(".button").click(function() {
$("#box").slideUp("slow").slideDown("slow").css("background", "orange"); //css不是动画方法，会默认排列到和第一个动画方法同步
});
注意：如果动画方法，连缀可以实现依次列队，而.css()方法不是动画方法，会在一开始传入列队之前。那么，可以采用动画方法的回调函数来解决。
使用回调函数，强行将.css()方法排队到.slideDown()之后：
$(".button").click(function() {
$("#box").slideUp("slow").slideDown("slow", function() {
$(this).css("background", "orange");
});
});
但如果这样的话，当列队动画繁多的时候，可读性不但下降，而原本的动画方法不够清晰。所以，我们的想法是每个操作都是自己独立的方法。那么jQuery提供了一个类似于回
调函数的方法：.queue()。
使用.queue()方法模拟动画方法跟随动画方法之后：
$(".button").click(function() {
$("#box").slideUp("slow")
.slideDown("slow")
.queue(function() {
$(this).css("background", "orange");
});
});
现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现，这是.queue()特性导致的。有两种方法可以解决这个问题，jQuery的.queue()的回调函数可以传递一个参数，这个参数是next函数，在结尾处调用这个next()方法即可再连缀执行列队动画。
使用next参数来实现继续调用列队动画：
$(".button").click(function() {
$("#box").slideUp("slow")
.slideDown("slow")
.queue(function(next) {
$(this).css("background", "orange");
next();
}).hide("slow");
});
因为next函数是jQuery1.4版本以后才出现的， 而之前我们普遍使用的是.dequeue()方法，意思为执行下一个元素列队中的函数。
使用.dequeue()方法执行下一个函数动画：
$(".button").click(function() {
$("#box").slideUp("slow")
.slideDown("slow")
.queue(function() {
$(this).css("background", "orange");
$(this).dequeue();
}).hide("slow");
});
如果采用顺序调用，那么使用列队动画方法，就非常清晰了，每一段代表一个列队， 而回调函数的嵌套就会杂乱无章。
使用顺序调用的列队，逐个执行，非常清晰：
$(".button").click(function() {
$("#box").slideUp("slow");
$("#box").slideDown("slow");
$("#box").queue(function() {
$(this).css("background", "orange");
$(this).dequeue();
});
$("#box").hide("slow");
});
.queue()方法还有一个功能，就是可以得到当前动画列队的长度。当然，这个用法在普通Web开发中用的比较少，我们这里不做详细探讨。
$(".button").click(function() {
$("#box").slideUp("slow")
.slideDown("slow",function() { alert(count()) }) //3，即还有3个列队动画未执行
.queue(function() {
$(this).css("background", "orange");
$(this).dequeue();
})
.hide("slow");
});
function count() {
return $("#box").queue("fx").length; //获取当前列队的长度，fx是默认列队的参数
}
jQuery还提供了一个清理列队的功能方法：.clearQueue()。把它放入一个列队的回调函数或.queue()方法里，就可以把剩下未执行的列队给移除。
$(".button").click(function() {
$("#box").slideUp("slow")
.slideDown("slow",function() { $(this).clearQueue(); })
.queue(function() {
$(this).css("background", "orange");
$(this).dequeue();
})
.hide("slow");
});
