首页 > js学习 > js基础知识 > jQery中自定义动画和实现队列动画的方法
2016
12-16

jQery中自定义动画和实现队列动画的方法

jQuery 提供了几种简单常用的固定动画为我们使用。但有些时候,这些简单动画无法满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建自定义动画,满足更多复杂多变的要求。

$('.animate').click(function (){$('#box').animate({'width':'300px','height':'200px','fontSize':'50px','opacity':0.5});});//键名可以省略单引号或双引号

animate()必传的参数只有一个,就是CSS 变化样式的一个或多个键值对的对象。还有两个可选参数分别为速度和回调函数。

$('.animate').click(function (){$('#box').animate({'width':'300px','height':'200px'},1000,function (){alert('回调函数');});});

自定义动画中,每次开始运动都必须是初始位置或初始状态,而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。

$('.animate').click(function () {$('#box').animate({'left':'+=100px',});});

普通方法实现队列动画:

1、同一个元素通过连缀或者顺序调用实现列队动画

$('.animate').click(function (){$('#box').animate({'left' : '100px'}).animate({'top' : '100px'}).animate({'width' : '300px'});});

$('.animate').click(function (){

$('#box').animate({'left' : '100px'});

$('#box').animate({'top' : '100px'});

$('#box').animate({'width' : '300px'});

});

2、不同元素通过回调函数实现列队动画

$('.animate').click(function () {$('#box').animate({'left' : '100px'}, function () {$('#box').animate({'top' : '100px'}, function () {$('#box').animate({'width' : '300px'});});});});

列队动画方法

上面我们已经可以实现列队动画了,如果是同一个元素,可以依次顺序或连缀调用。 如果是不同元素,可以使用回调函数。但有时列队动画太多,回调函数的可读性大大降低。 为此,jQuery 提供了一组专门用于列队动画的方法。

连缀无法实现按顺序列队

$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');

如果动画方法,连缀可以实依次列队,而.css()方法不是动画方法,会在一开始传入列队之前。那么,可以采用动画方法的回调函数强行将.css()方法排队到.slideDown()之后来解决

$('#box').slideUp('slow').slideDown('slow', function () {$(this).css('background', 'orange');});

但如果这样的话,当列队动画繁多的时候,可读性不但下降,而原本的动画方法不够清晰。所以,我们的想法是每个操作都是自己独立的方法。那么jQuery 提供了一个类似于回调函数的方法:.queue()。使用.queue()方法模拟动画方法跟随动画方法之后

$('#box').slideUp('slow').slideDown('slow').queue(function (){$(this).css('background', 'orange');});

但是,当我们想继续在.queue()方法后面再增加一个隐藏动画,这时发现居然无法实现。这是.queue()特性导致的。有两种方法可以解决这个问题,jQuery 的.queue()的回调函数可以传递一个参数,这个参数是next函数,在结尾处调用这个 next()方法即可再连缀执行列队动画。

$('#box').slideUp('slow').slideDown('slow').queue(function (next) {$(this).css('background', 'orange');next();}).hide('slow');

因为next函数是jQuery1.4版本以后才出现的,而之前我们普遍使用的是.dequeue()方法。意思为执行下一个元素列队中的函数。

$('#box').slideUp('slow').slideDown('slow').queue(function () {$(this).css('background', 'orange');$(this).dequeue();}).hide('slow');

用dequeue()时的queue()中的function不需要传参,并且调用时需要$(this).dequeue()

如果采用顺序调用,那么使用列队动画方法,就非常清晰了,每一段代表一个列队, 而回调函数的嵌套就会杂乱无章。

$('.animate').click(function (){

$('#box').slideUp('slow');

$('#box').slideDown('slow');

$('#box').queue(function (next){$(this).css('background', 'orange');next();});

$('#box').hide('slow');

});

.queue()方法有一个功能,就是可以得到当前动画个列队的长度。

function count() {return $("#box").queue('fx').length;} //获取当前列队的长度,fx 是默认列队的参数

$('#box').slideDown('slow', function () {alert(count());}); //在某个动画处调用,返回从该动画开始之后的列队长度(包含该动画,不包含该动画之前的动画)

jQuery提供了一个清理列队的功能方法:.clearQueue()。把它放入一个列队的回调函数或.queue()方法里,就可以把剩下未执行的列队给移除。

$('#box').slideDown('slow', function () {$(this).clearQueue()});

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。