首页 > js学习 > js基础知识 > jQuery中动画的方法和属性
2016
12-16

jQuery中动画的方法和属性

动画相关方法

很多时候需要停止正在运行中的动画,jQuery 为此提供了一个.stop()方法。它有两个可选参数:.stop(clearQueue, gotoEnd);clearQueue传递一个布尔值,代表是否清空未执行完的动画列队,gotoEnd 代表是否直接将正在执行的动画跳转到末状态。

$('.stop').click(function (){$('#box').stop();});//强制停止运行中的动画

$('.animate').click(function () { //带参数的强制运行

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

$('#box').animate({'height' : '300px'}, 1000);

});

$('.stop').click(function () {$('#box').stop(true ,true);});

第一个参数表示是否取消列队动画,默认为 false。如果参数为true,当有列队动画的时候,会取消后面的列队动画。第二参数表示是否到达当前动画结尾,默认为 false。如果参数为true,则停止后立即到达末尾处。

有时在执行动画或列队动画时, 需要在运动之前有延迟执行, jQuery为此提供了.delay()方法。这个方法可以在动画之前设置延迟,也可以在列队动画中间加上。

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

$('#box').delay(1000).animate({'left' : '300px'}, 1000); //开始延迟 1 秒钟

$('#box').animate({'bottom' : '300px'}, 1000);

$('#box').delay(1000).animate({'width' : '300px'}, 1000); //中间延迟1 秒

$('#box').animate({'height' : '300px'}, 1000);

});

在选择器的基础章节中,我们提到过一个过滤器:animated,这个过滤器可以判断出当前运动的动画是哪个元素。 通过这个特点,我们可以避免由于用户快速在某个元素执行动画时,由于动画积累而导致的动画和用户的行为不一致。

$('#box').slideToggle('slow', function () {$(this).slideToggle('slow', arguments.callee);});//递归执行自我,无限循环播放

$('.button').click(function(){$('div:animated').stop().css('background', 'red');});//停止正在运动的动画,并且设置红色背景

动画全局属性

jQuery 提供了两种全局设置的属性, 分别为: $.fx.interval, 设置每秒运行的帧数; $.fx.off,关闭页面上所有的动画。$.fx.interval属性可以调整动画每秒的运行帧数,默认为 13毫秒。数字越小越流畅,但可能影响浏览器性能。

//设置运行帧数为 1000毫秒

$.fx.interval = 1000; //默认为 13

$('.button').click(function () {$('#box').toggle(3000);});

$.fx.off属性可以关闭所有动画效果,在非常低端的浏览器,动画可能会出现各种异常问题导致错误。而 jQuery 设置这个属性,就是用于关闭动画效果的。

$.fx.off = true; //默认为 false

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