长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

web程序:jQuery animate动画stop()方法详解

  • 时间:2016-10-26 12:11
  • 发布:长沙web培训
  • 来源:web教程

长沙达内Web培训的老师这一期给大家讲jQuery animate动画stop()方法详解。

一、动画格式:

格式一: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)是否停止当前执行的动画同时直接跳到动画的效果最终结果;

示例:

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 ); //清空队列,直接完成当前动画

}

} );

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'的动画

}

以上都是对方法animate() & .stop()的长沙达内Web培训的老师的讲解。

上一篇:判断数组的最佳方法
下一篇:不得不知CALL()和APPLY()

马上预约三天免费体验课

姓名:

电话:

Web前端:CSS控制div宽度

HTML的语义化和一些简单优化

Web培训老师教你用canvas实现刮刮乐

mouse事件在JQ中的应用

选择城市和中心
贵州省

广西省

海南省