前段时间在使用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
    Type: FunctionNumber now, Tween tween )
    每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
  • progress
    Type: FunctionPromise animation, Number progress, Number remainingMs )
    每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。

光从字面上看我确实看不出是什么原因,但是肯定是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中文文档后才知道

  • complete
    Type: Function()
    在动画完成时执行的函数。
  • done
    Type: FunctionPromise animation, Boolean jumpedToEnd )
    在动画完成时执行的函数。 (他的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 语法的更多相关文章

  1. jquery animate()方法 语法

    jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...

  2. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  3. jquery clearQueue方法 语法

    jquery clearQueue方法 语法 作用:clearQueue() 方法停止队列中所有仍未执行的函数.与 stop() 方法不同,(只适用于动画),clearQueue() 能够清除任何排队 ...

  4. jquery animated选择器 语法

    jquery animated选择器 语法 作用::animated 选择器选取当前的所有动画元素.直线电机参数 语法:$(":animated") jquery animated ...

  5. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  6. jquery animate函数实现

    jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...

  7. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  8. jQuery链式语法演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery animate()背景色渐变的处理

    jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: ...

随机推荐

  1. 应用Python处理空间关系数据

    from osgeo import ogrimport jsonfrom geojson import loads, dumps, Feature, FeatureCollectionfrom sha ...

  2. 少个人保护?我来!——阿里云在ICANN第3届GDD峰会纪实

    西班牙马德里以足球和斗牛闻名于世,2017年5月9日至11日,ICANN第三届全球域名部门行业峰会(GDD)在这里召开.阿里云作为亚洲域名保有量最高的注册商,代表成千上万客户的利益与权力,派出代表,前 ...

  3. 漂亮的ActionBar效果

    Newsstand—这个应用引进了新的方式,使得ActionBar达到了新的水平.如果你打开这个应用的发布页,你会注意到不带图标的ActionBar是半透明的,而且和一个大的图片集(一个大的杂志图标, ...

  4. 线程间的通信方式3--Handler

    Android的消息处理有三个核心类:Looper,Handler和Message.其实还有一个Message Queue(消息队列),但是MQ被封装到Looper里面了,我们不会直接与MQ打交道,因 ...

  5. 12 tensorflow实战:修改三维tensor矩阵的某个剖面

    # -*- coding: utf-8 -*- """ Created on Mon Apr 22 21:02:02 2019 @author: a "&quo ...

  6. ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

    最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...

  7. Ssh 证书验证 续篇

    今天下午正好有外面的人要登录服务器,想了想,普通用户密码就是不想给,然后我就这样做了. useradd alex ---创建账户和密码 passwd alex mkdir /home/alex/.ss ...

  8. 模板与STL学习简单的笔记

    一.如何进行泛型编程 C/C++是一种静态编程语言,必须需要把代码翻译成可执行的二进制可执行程序然后再运行,一旦编译好之后就不能再变了(数据类型也就必须确定下无法更改,因此要为每一种数据类型编写一份算 ...

  9. spring-springmvc-hibernate项目小结

    1. web.xml中别忘记加入spring监听器 <listener> <listener-class>org.springframework.web.context.Con ...

  10. #003 React 组件 继承 自定义的组件

    主题:React组件 继承 自定义的 组件 一.需求说明 情况说明: 有A,B,C,D 四个组件,里面都有一些公用的逻辑,比如 设置数据,获取数据,有某些公用的的属性,不想在 每一个 组件里面写这些属 ...