平时使用animate只用于dom节点的动画,无意间发现JQuery内置的animate方法可实现数字动画,JQ还是挺强大的!

动画效果为从0一步步跳到84,代码如下:

 $({
// 起始值
countNum: 0
}).animate({
// 最终值
countNum: 84
}, {
// 动画持续时间
duration: 3000,
easing: "linear",
step: function() {
// 设置每步动画计算的数值
$('#num').text(Math.floor(this.countNum));
},
complete: function() {
// 设置动画结束的数值
$('#num').text(this.countNum);
}
});

用JQuery内置animate方法实现数字递增动画的更多相关文章

  1. Flex Array内置排序方法的使用

    在Array类中,提供内置的排序方法.排序是在软件开发的过程中,经常遇到的问题.通过这些内置的方法,可以快速轻便的进行排序操作. Array类提供sort方法对Array实例进行排序.sort方法没有 ...

  2. day29 类中的内置函数方法 __str__ __repr__ __call__ isinstance() issubclass()

    __str__()__repr__()__len__() str() 转字符串repr() 让字符原形毕露的方法len() 计算长度 内置的方法很多,但是并不是全部都在object中,比如len(), ...

  3. Python 的内置字符串方法(收藏专用)

    Python 的内置字符串方法(收藏专用) method 字符串 string python3.x  python 4.7k 次阅读  ·  读完需要 44 分钟 5 字符串处理是非常常用的技能,但 ...

  4. python - 类的内置 attr 方法

    类的内置 attr 方法 #类的内置 attr 方法: # __getattr__ # __setattr__ # __delattr__ # __getattr__ #到调用一个类不存在数参数时,将 ...

  5. jQuery中效果animate方法解决width是百分比出现的问题

    jQuery中效果animate方法解决width是百分比出现的问题 http://www.mafutian.net/131.html 问题描述: 效果如图,初始化,每个层宽20%,采用animate ...

  6. 字典内置函数&方法

    字典内置函数&方法 Python字典包含了以下内置函数:高佣联盟 www.cgewang.com 序号 函数及描述 1 cmp(dict1, dict2)比较两个字典元素. 2 len(dic ...

  7. 类的两个装饰器classmethod、staticethod和内置魔术方法

    一.两个装饰器@classmethod.@staticmethod @classmethod:把类中的绑定方法变成一个类方法,cls 就等于类名 有什么用? 1.在方法中任然可以引用类中的静态变量 2 ...

  8. 利用jQuery内置的data()方法存储数据

    jQuery提供了内置的data()方法,与DOM元素不同的是,它可以用来存储key/value类型的数据.数据的存储是很容易的: $('#myDiv').data('currentState', ' ...

  9. python - format函数 /class内置format方法

    format函数 # format函数 # 用于字符串格式化 # 基本用法: # 方式一:(位置方式) x = "{0}{1}{2}".format(1,2,3) print('1 ...

随机推荐

  1. kubeadm安装kubernetes 1.16.2

    目录 简介 环境说明 安装 准备基础环境 安装docker 安装kubeadm.kubelet.kubectl 配置kubeadm-config.yaml 部署master 安装flannel网络插件 ...

  2. 使用Prometheus+Grafana监控JVM

    一.概述 JMX Exporter https://github.com/prometheus/jmx_exporter 它是Prometheus官方组件,作为一个JAVA Agent来提供本地JVM ...

  3. angularJS 在edge浏览器上传文件,无法主动触发ng-click

    今天发现的问题 在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用. 代码参考我的另一篇博客:WebAPI Angularjs 上传文件 不能运行的原因 下图红框中的代码在edge浏览器中无法执 ...

  4. MySQL难点语法——子查询

    本篇主要通过练习来讲解子查询的知识,进入正题之前,先熟悉数据表,表格的数据可以先不用管,主要是熟悉表格的字段名 这里子查询分为三个部分: 1.where条件子查询 这个子查询和普通的查询没什么区别,主 ...

  5. Bloom’S Taxonomy

    引用:https://www.learning-theories.com/blooms-taxonomy-bloom.html Bloom's Taxonomy is a model that is ...

  6. CRM产品主数据在行业解决方案industry solution中的应用

    AG3, choose this role: Create a new Acquisition Contracts: Here our product advances search will be ...

  7. 软件架构的演进,了解单体架构,垂直架构,SOA架构和微服务架构的变化历程

    软件架构演进 软件架构的发展经历了从单体结构.垂直架构.SOA架构到微服务架构的过程,博客里写到了这四种架它们的特点以及优缺点分析,个人学习之用,仅供参考! 1.1.1      单体架构 特点: 1 ...

  8. windows10 docker安装使用

    一.安装部署 1.下载安装 https://hub.docker.com/editions/community/docker-ce-desktop-windows 需要注册完后,才可以下载.点击安装 ...

  9. 面向对象(三)--多态、封装、property装饰器

    一.多态与多态性 1.什么是多态 多态指的是同一种类/事物的不同形态 class Animal: def speak(self): pass class People(Animal): def spe ...

  10. Linux的DNS正向解析部署

    前面介绍了DNS的作用及其相关的结果.Linux服务之DNS介绍 下面开始有关DNS的服务部署.<DNS正向解析示例> 工具:虚拟机 centos7 配置:Linux   IP 192.1 ...