登录 | 注册

优就业jQuery教程-jQuery animate动画 stop()方法详解~

首页 > Web前端 > JQuery 2016-10-12 11:48:44 浏览次 共 条评论

收藏赞(分享

一、动画格式:

格式一: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'的动画

}

免责声明:本文来源于博客园,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价
相关文章
优就业WEB前端教程-关于jquery跨域请求方法
优就业WEB前端教程-关于jquery跨域请求方法
优就业WEB前端教程-jquery操作复选框(checkbox)的12个小技巧总结
优就业WEB前端教程-jquery操作复选框(checkbox)的12个小技巧总结
优就业 jQuery 教程-jQuery 基础总结
优就业 jQuery 教程-jQuery 基础总结
优就业jQuery教程-jQuery Mobile Slider Widget 使用js控制
优就业jQuery教程-jQuery Mobile Slider Widget 使用js控制
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博