jQuery是一款非常流行的JavaScript库，其优秀的可读性和易用性众所周知。在第七章的上机三中，我们将学习如何使用动画效果来生动地呈现网页。
在介绍动画效果之前，我们需要先明白两个概念——“欺骗”和“队列”。欺骗指的是将多个动画操作看作是一个操作，从而使它们同时进行；队列则指的是将多个动画操作看作是独立的操作，排队依次进行。
$("button").click(function(){
$("div:first").animate({
left:'+=200px',opacity:'0.5',height:'+=150px',width:'+=150px'
},5000);
$("div:last").animate({
left:'-=200px',5000);
});在这段代码中，我们用了两个动画方法/animate/，分别对网页上的两个
元素进行操作。如果没有使用欺骗操作，这两个动画将会依次执行，而不是同时进行。在这里，我们使用欺骗操作将两个动画合并为了一个动画。
接下来我们了解队列操作。代码如下：
$("button").click(function(){
var div=$("div");
div.animate({left:'+=200px'},"slow");
div.animate({top:'+=200px'},"slow");
div.animate({left:'-=200px'},"slow");
div.animate({top:'-=200px'},"slow");
});元素进行水平和垂直方向上的移动。在没有使用队列操作之前，这四个动画将交替执行，这并不是我们所期望的结果。为了让这四个动画顺序执行，我们需要使用队列操作。代码如下：
$("button").click(function(){
var div=$("div");
div.animate({left:'+=200px'},"slow")
.animate({top:'+=200px'},"slow")
.animate({left:'-=200px'},"slow")
.animate({top:'-=200px'},"slow");
});相关文章
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
