前段时间在使用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. Linux之FineBI集群部署

    在企业应用中,通常单个计算机的配置是有限的,而企业应用又是高并发的需求,这个时候会通过计算机集群的方式来提高并发数,从而提高整体应用服务的性能.集群是将多台计算机作为一个整体来提供相关应用的服务.Fi ...

  2. 深度学习GPU集群管理软件 OpenPAI 简介

    OpenPAI:大规模人工智能集群管理平台 2018年5月22日,在微软举办的“新一代人工智能开放科研教育平台暨中国高校人工智能科研教育高峰论坛”上,微软亚洲研究院宣布,携手北京大学.中国科学技术大学 ...

  3. 使用Callable和Future接口创建线程

    具体是创建Callable接口的实现类,并实现clall()方法.并使用FutureTask类来包装Callable实现类的对象,且以此FutureTask对象作为Thread对象的target来创建 ...

  4. 二、ionic如何使用外链

    1.ionic如何使用外链并返回原有页面? html如下: 对应的controller如下: (function() { angular.module('app').controller('extra ...

  5. https的网站用了百度分享后网站在浏览器中不安全解决方法

    本文出至:新太潮流网络博客 一.先下载百度分享需要的所有东西 下载地址:http://pan.baidu.com/s/1boM7N8V 二.打开百度分享,获取到分享的代码 三.将下载好的百度分享需要的 ...

  6. 如何将同一 VNET 下的虚拟机从经典部署模型迁移到 Azure Resource Manager

    本文内容 适用场景 解决方案 适用场景 用户拥有多个云服务但是在同一个 VNET 下,希望将这些虚拟机从经典部署模型(以下简称:ASM)迁移到 Azure Resource Manager(以下简称: ...

  7. mysql性能优化-慢查询分析、优化索引和配置 (慢查询日志,explain,profile)

    mysql性能优化-慢查询分析.优化索引和配置 (慢查询日志,explain,profile) 一.优化概述 二.查询与索引优化分析 1性能瓶颈定位 Show命令 慢查询日志 explain分析查询 ...

  8. python基础_类型_list

    #list 类似数组array,以[]扩起来逗号分隔 a = ['a','b','c'] #常用函数 a.append('c') #在list最后增加一个元素,结果是['a','b','c','c'] ...

  9. 使用 Versions for mac 进行版本控制

    刚开始折腾 xcode 5.1 自己的svn版本控制,应该很好用,但是用不好,搞了半天也没法把工程传到svn服务器上去. 在 xcode 5.1 Soure Control 中弄 点击 Check O ...

  10. jQuery Ajax url使用方式

    jQuery Ajax的使用场景: 页面需要通过后台逻辑,但只需要局部刷新以显示新的内容. jQuery Ajax url使用方式1.servlet方式: 需要在struts.xml中写一个actio ...