前段时间在使用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. 配置hive使用mysql存储metadata metadatastore

        hive默认使用derby数据库保存元数据,derby数据库比较小众,并且一次只能打开一个会话,一般修改为mysql数据库. 1.修改conf/hive-site.xml配置项: <pr ...

  2. 解决升级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验证,修改 ...

  3. 【Java】函数使用

    package aaa; public class aaa { public static int add(int a,int b) { return a+b; } public static voi ...

  4. c# 编译期常量const和运行时常量readonly

    注意:const编译期常量是编译的时候就确定的,可以查看IL代码,是写死的.如果另一个程序集引用后,该程序集没有进行编译,则值不会改变. 看效果: 项目中有2个程序集: 其中:常量在这个程序集中定义并 ...

  5. cookie 常用的几种方法

    { setCookie: function(sName, sValue, oExpires, sPath, sDomain, bSecure) { var sCookie = sName + &quo ...

  6. asp.net MVC4 框架揭秘 读书笔记系列2

    1.2 MVC 变体 MVC 是一种Pattern 另外一种说法是ParaDigm 范例 模式和范例的区别在于前者可以应用到具体的应用上,而后者则仅仅提供一些指导方针 1.2.1 MVP Model ...

  7. [翻译] CHTCollectionViewWaterfallLayout

    CHTCollectionViewWaterfallLayout https://github.com/chiahsien/CHTCollectionViewWaterfallLayout CHTCo ...

  8. SpringBoot+MyBatis连接数据库

    SpringBoot通过MyBatis连接数据库有2种方法: 1.注解 2.XML文件 1.注解 1.构建项目 2.添加依赖: <dependencies> <dependency& ...

  9. Tomcat 配置学习

    1 server.xml <host appBase="d:/aaa"> <Context path="/smswap" reloadable ...

  10. iptables简单规则记录

    先来一句:好记性不如烂笔头! 1.iptables简介 iptables是基于包过滤的防火墙,它主要工作在osi模型的2,,4层,也可以工作在7层(iptables + squid) 2.原理 防火墙 ...