前段时间在使用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. 网络I/O模型--01阻塞模式(普通)

    很长一段时间内,大多数网络通信方式都是阻塞模式,即: · 客户端 向服务器端发出请求后,客户端会一直处于等待状态(不会再做其他事情),直到服务器端返回结果或者网络出现问题 . · 服务器端同样如此,当 ...

  2. Andoid多语言国际化策略

    目前手上的项目,为了普及覆盖更多的用户群,也已经开始实现了多语言设置这样的功能,不过今天我要说的不是微信,而是我们自己项目中的实现策略. 直接附上关键代码: package com.huolonglu ...

  3. ubuntu14.04 忘记了登录密码和root密码

    由于很久没用自己的ubuntu了,发现刚想用时却忘记了密码,搞了半天终于搞好了,真的.... 在此记录一下自己的新密码:登录密码:1234567:ROOT密码:1234567 下面是整理网上的教程,亲 ...

  4. MySQL 5.7 Reference Manual】15.4.2 Change Buffer(变更缓冲)

    15.4.2 Change Buffer(变更缓冲)   The change buffer is a special data structure that caches changes to se ...

  5. 转:线程Thread (1)

    引言 1.理解多线程 2. 线程异步与线程同步 3.创建多线程应用程序 3.1通过System.Threading命名空间的类构建 3.1.1异步调用线程 3.1.2并发问题 3.1.3线程同步 3. ...

  6. zendstudio 默认网页打开your project的时候不显示本地主机localhost的解决方法

    修改wamp配置文件c:\\wamp64\wampmanager.conf 修改为如下选项即可 默认这个选项是off关闭的,打开即可. urlAddLocalhost = "on" ...

  7. Web通信协议:OSI、TCP、UDP、Socket、HTTP、HTTPS、TLS、SSL、WebSocket、Stomp

    1      各层的位置 1.1      OSI七层模型全景图 OSI是Open System Interconnect的缩写,意为开放式系统互联. 1.2      五层网络协议 在七层的基础上, ...

  8. 【001】JS解析,反解析XML的一些问题

    JS解析,反解析 XML 的一些问题 2016-03-25 15:38:28 星期五 文章底部下面有提供把 字符串 变成 XML 对象的方法. 该方法,在 Chrome48 ,FireFox ,IE1 ...

  9. 第二次作业 APP分析

    第一部分 调研, 评测 1.下载软件并使用. 今天我要分析的软件app是UC浏览器这个软件,UC浏览器的用户群体还是挺多的,作为一款主流之一的浏览器APP,整体的用户体验还是很好的.简洁的界面还有中间 ...

  10. python3 80行代码实现贪吃蛇

    上面是实现的截图,废话不说,直接开始说一下代码 pos = { 'UP': (-1,0), 'DOWN':(+1,0), 'LEFT':(0,-1), 'RIGHT':(0,+1), } curren ...