jquery animate() Alternate 语法
前段时间在使用jQuery的animate() 函数时候用到Alternate方式。主要是要让数字自增到指定大小,且能看见数字增加过程。
一般使用如下方式:
function autoPlusAnimate(obj){
if(obj== null)
return; $({Counter: 0}).animate({ Counter: obj.attr('num') }, {
duration: 1200,
easing: 'swing',
step: function () {
obj.html(this.Counter.toFixed(2)+'%'); } });
}
嗯...能运行,不报错,但是问题来了。多刷新试试,会发现有时动画过程会在未达到指定数字的时候就停下了。可想而知,不管是数字动画还是其他动画都可能出现未到达目标前就停止了。
然后找到这个,jquery api中文文档
- step每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
- progress每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。
光从字面上看我确实看不出是什么原因,但是肯定是step的实现方式的原因,这里没有研究,需要知道的大神讲解一下。但是这里不是还提供另一个方式吗?那就试试
function autoPlusAnimate(obj){
if(obj== null)
return; $({Counter: 0}).animate({ Counter: obj.attr('num') }, {
duration: 1200,
easing: 'swing',
progress: function () {
obj.html(this.Counter.toFixed(2)+'%');
} });
}
经测试发现,使用progress属性实现动画片段的过程没有问题。但是熟悉用jQuery的人在遇到这个问题的时候,应该都会想另一种解决方案,使用回调函数。我们在动画完成的时候使用回调把数据改为目标值就行了啊,完美。但是在没有看jquery api中文文档之前,我看了菜鸟网、和w3school的api,如下:
Alternate 语法
(selector).animate({styles},{options})
参数 描述
styles 必需。规定产生动画效果的一个或多个 CSS 属性/值(同上)。
options 可选。规定动画的额外选项。
可能的值:
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始。
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
这里让我一度以为回调函数是使用callback,发现没有任何效果。在看jquery api中文文档后才知道
- completeType: Function()在动画完成时执行的函数。
- done在动画完成时执行的函数。 (他的Promise对象状态已完成)
使用complete、和done来实现回调函数即可
function autoPlusAnimate(obj){
if(obj== null)
return; $({Counter: 0}).animate({ Counter: obj.attr('num') }, {
duration: 1200,
easing: 'swing',
step: function () {
obj.html(this.Counter.toFixed(2)+'%');
}
,done: function(){
obj.html(obj.attr('num')+'%');
} });
}
使用了done或者complete 后,那么不管你之前使用的step还是progress 应该都不会出现在属性到达指定值之前就停下的情况。
jquery animate() Alternate 语法的更多相关文章
- jquery animate()方法 语法
jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...
- jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
- jquery clearQueue方法 语法
jquery clearQueue方法 语法 作用:clearQueue() 方法停止队列中所有仍未执行的函数.与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队 ...
- jquery animated选择器 语法
jquery animated选择器 语法 作用::animated 选择器选取当前的所有动画元素.直线电机参数 语法:$(":animated") jquery animated ...
- 【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...
- jquery animate函数实现
jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...
- jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
- jQuery链式语法演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery animate()背景色渐变的处理
jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...
随机推荐
- 配置hive使用mysql存储metadata metadatastore
hive默认使用derby数据库保存元数据,derby数据库比较小众,并且一次只能打开一个会话,一般修改为mysql数据库. 1.修改conf/hive-site.xml配置项: <pr ...
- 解决升级PHP7.1后,发邮件时提示“fsockopen(): Peer certificate CN=`xxx.xx.com' did not match expected CN=`113.x.xx.98”
把项目环境升级到PHP7.1后,发现在不使用SSL时可以使用IP发邮件,可设置成SSL时就只能使用hostname发送,PHP提示的错误信息大致意思是说,IP与hostname无法通过SSL验证,修改 ...
- 【Java】函数使用
package aaa; public class aaa { public static int add(int a,int b) { return a+b; } public static voi ...
- c# 编译期常量const和运行时常量readonly
注意:const编译期常量是编译的时候就确定的,可以查看IL代码,是写死的.如果另一个程序集引用后,该程序集没有进行编译,则值不会改变. 看效果: 项目中有2个程序集: 其中:常量在这个程序集中定义并 ...
- cookie 常用的几种方法
{ setCookie: function(sName, sValue, oExpires, sPath, sDomain, bSecure) { var sCookie = sName + &quo ...
- asp.net MVC4 框架揭秘 读书笔记系列2
1.2 MVC 变体 MVC 是一种Pattern 另外一种说法是ParaDigm 范例 模式和范例的区别在于前者可以应用到具体的应用上,而后者则仅仅提供一些指导方针 1.2.1 MVP Model ...
- [翻译] CHTCollectionViewWaterfallLayout
CHTCollectionViewWaterfallLayout https://github.com/chiahsien/CHTCollectionViewWaterfallLayout CHTCo ...
- SpringBoot+MyBatis连接数据库
SpringBoot通过MyBatis连接数据库有2种方法: 1.注解 2.XML文件 1.注解 1.构建项目 2.添加依赖: <dependencies> <dependency& ...
- Tomcat 配置学习
1 server.xml <host appBase="d:/aaa"> <Context path="/smswap" reloadable ...
- iptables简单规则记录
先来一句:好记性不如烂笔头! 1.iptables简介 iptables是基于包过滤的防火墙,它主要工作在osi模型的2,,4层,也可以工作在7层(iptables + squid) 2.原理 防火墙 ...