版权声明:本文为博主原创文章,转载请注明出处。 /twilight_karl/article/details/73511662
同步动画
animate(参数对象,time,回调函数)
同时改变多个样式。
$(":button").click(function(){$("div").animate({'width':"300px",'height':"300px",'opacity':0.5,'font-size':'50px'});});
添加速度和回调函数
$(":button").click(function(){$("div").animate({'width':"300px",'height':"300px",'opacity':0.5,'font-size':'50px'},200,function(){alert("动画完成");});});
移动动画。需要将div的样式设置成position:absolte,然后在改变left和top的值即可:
$(":button").click(function(){$("div").animate({left:'100px',top:'100px'});});
位置的自增自减。位置的改变可以自增自减(+=,-=)
$(":button").click(function(){$("div").animate({left:'+=100px',top:'-=100px'});});
运动模式
有两种速度
- swing 缓动(先快后慢)
- linear 匀速
$(".a").animate({left:"500px"},2000,'swing');$(".b").animate({left:"500px"},2000,'linear');
列队动画
回调函数
嵌套调用回调函数,可以实现队列动画,但是比较繁琐
$(":input").click(function(){$("div").animate({width:"300px"},function(){$("div").animate({height:"300px"},function(){$("div").animate({height:"300px"},function(){$("div").animate({fontSize:"50px"});})});});});
连缀或顺序排列
链式调用
jQuery支持链式调用。因此可以链式的改变多个样式
$(":input").click(function(){$("div").animate({width:"300px"}).animate({height:"300px"}).animate({fontSize:"50px"});});
顺序排列
将动画分解,并列的依次调用
$(":input").click(function(){$("div").animate({width:"300px"});$("div").animate({height:"300px"});$("div").animate({fontSize:"50px"});});
PS
以上方法对于单个元素的样式可以实现列队动画。但是如果同时控制几个元素时,不同的元素同时开始执行。但是执行时是按照队列依次执行自身的动画,如果需要不同的元素之间队列执行,就必须嵌套回调函数
$(":input").click(function(){$(".a").animate({width:"300px"});$(".a").animate({height:"300px"});$(".a").animate({fontSize:"50px"});$(".b").animate({width:"300px"});$(".b").animate({height:"300px"});$(".b").animate({fontSize:"50px"});});
queue()
如果在一连串的动画后调用改变样式的函数。那么会先改变css样式,后执行动画。
$(":input").click(function(){$(".a").animate({width:"300px"}).animate({height:"300px"}).css("background-color","skyblue" );});
解决的方法是使用queue函数,该函数会让动画先执行:
$(":input").click(function(){$(".a").animate({width:"300px"}).animate({height:"300px"}).queue(function(){$(".a").css("background-color","skyblue" );});});
但是,这是如果在queue后再接着调用其他动画时会失效,解决方法是在queue函数的末尾调用next(),同时在queue的匿名函数入口传入next
queue(function(next){… next()});
$(":input").click(function(){$(".a").animate({width:"300px"});$(".a").animate({height:"300px"}).queue(function(next){$(".a").css("background-color","skyblue");next();}).animate({width:"800px"});});
较老的版本使用dequeue函数达到同样的效果:
$(":input").click(function(){$(".a").animate({width:"300px"});$(".a").animate({height:"300px"}).queue(function(next){$(".a").css("background-color","skyblue");$(this).dequeue();}).animate({width:"800px"});});
queue还可以得到当前动画的长度
clearQueue()
清理之后没有开始的动画,并且,clearQueue() 方法移除任何排队的函数。
$(":input").click(function(){$(".a").animate({width:"300px"},2000);$(".a").animate({height:"300px"},2000);$(".a").animate({fontSize:"50px"},2000);$(".a").queue(function(next){$(".a").css("background-color","skyblue");$(this).dequeue();}).animate({width:"800px"});});$(":input:eq(1)").click(function(){$(".a").clearQueue();});
stop()
stop(clearQueue,gotoEnd)
- clearQueue 停止,并清空后面未执行完的动画。默认为 false (true/false)
- gotoEnd 停止后,当前动画执行完毕的位置,默认为 false (true/false)
默认地,如果有列队动画,stop停止第一个列队动画,而继续执行后面的动画。
$(":button:eq(0)").click(function(){$(".a").animate({left:"500px"},1000);$(".a").animate({top:"500px"},1000);$(".a").animate({width:"500px"},1000);});$(":button:eq(1)").click(function(){$(".a").stop(true,true);});
delay()
事件延迟一定的时间
delay(time)
$(":button:eq(0)").click(function(){$(".a").animate({left:"500px"});$(".a").animate({top:"500px"});$(".a").delay(1000);$(".a").animate({width:"500px"});});
animated
之前说过的一个过滤器,可以选择正在执行动画的元素
一个永不停止的动画:
$(".a").slideToggle(function(){$(".a").slideToggle(arguments.callee);});
使用过滤器:
$(":button").click(function(){$(":animated").css("backgroundColor","blue");});
动画的全局属性
全局的动画属性:
- .fx.interval动画执行的帧数(num)−.fx.off 关闭动画(true/false)
$.fx.interval = 100; 设置帧数为100 ,动画变得卡顿$.fx.off = true; 取消所有动画