一、动画格式：
格式一：jQueryObject.animate( cssProperties, options )
格式二：$(‘#id’).animate( styles[, duration ] [, easing ] [, complete ] )
手动调用方法：$(‘#id’).dqueue( [ queueName ] )
停止方法：$(‘#id’).stop( [ queueName ] [, clearQueue [, jumpToEnd ] )
二、属性介绍：
2.1、animate属性：
styles： 执行的css动画集合:一个或多个css属性的键值对所构成的Object对象。
speed/option： 执行时间/可以设置相关属性(指定动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串”fast”(=200)或”slow”(=600))；
easing：指定使用何种动画效果，默认为”swing”，还可以设为 “linear”或其他自定义的动画样式函数。
callback：回调函数
2.2、stop属性：
queueName：(默认：’fx’)需要停止动画的队列名称；
clearQueue：(默认：false)是否执行清除后续队列:$(selector).animate(a,b,c)..animate(a2,b2,c2).animate(a3,b3,c3)…N；
jumpToEnd：（默认：false）是否停止当前执行的动画同时直接跳到动画的效果最终结果；
三、示例：
3.1、自动执行
$(selector).animate(a,b,c)..animate(a2,b2,c2).animate(a3,b3,c3)…N；
stop()方法使用实例：
$(‘#btnstop’).click( function(){
var v = $(‘#animation’).val();//文本框或其他控件传入1、2、3、4等值
var $myDiv = $(‘#myDiv’);
if(v == ‘1’){
$myDiv.stop( ); // 停止当前动画，不清空队列，即会继续执行下一个动画效果
}else if(v == ‘2’){
$myDiv.stop( true ); // 停止当前动画，清空队列，及停止全部动画效果
}else if(v == ‘3’){
$myDiv.stop( ‘fx’, true ); // 等同于’2”fx’
}else if(v == ‘4’){
$myDiv.stop( true, true ); // 清空队列，直接完成当前动画
}
} );
3.2、手动执行
animate代码：
$(‘#dv’).animate({
’borderWidth’:’20px’,
’position’.’absolute’,
’left’,’20px’,
’top’,’20px’
},{
duration:3000,//执行动画的时间（毫秒）
easing:’swing’,//指定使用何种动画效果
queue:’qName’//指定动画名称
})
调用方法代码：
$(‘#btnStar’).clik(function (){
$(‘#id’).dqueue(‘qName’)//$(‘#id’)对象执行动画名称为’qName’的动画
}
停止方法代码
$(‘#btnStop’).clik(function (){
$(‘#id’).stop(‘qName’)//$(‘#id’)停止执行动画名称为’qName’的动画
}
谢谢！
转载请注明来源网站:blog.ytso.com谢谢！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/15006.html