jquery-animateNumber

2018-07-15 admin

jquery-animateNumber是什么

什么是jquery-animateNumber,jQuery animate number plugin

jquery-animateNumber介绍、jquery-animateNumber使用

Code Climate

Demo | v0.0.14 – Latest Release

README на русском языке

jQuery numbers animation plugin, adds ‘number’ property and step function to jQuery’s animate function properties.

Requires jQuery 1.7.0 or higher (tested with 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.0).

Quick example

<p>Fun level <span id="fun-level" style="color: red; font-size: 0px;">0 %</span>.</p>
// animateNumber accepts same arguments, as animate does
// it adds only 'number' and 'numberStep' params
$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green', // require jquery.color
    'font-size': '50px',

    easing: 'easeInQuad', // require jquery.easing

    // optional custom step function
    // using here to keep '%' sign after number
    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);

      target.text(floored_number + ' %');
    }
  },
  1800
);

All examples

Alternative plugins for same task

Development

  1. npm install grunt-cli -g
  2. npm install
  3. https://github.com/gmarty/grunt-closure-compiler
  4. grunt watch

Note on Patches / Pull Requests

  • Fork the project.
  • Make your feature addition or bug fix.
  • Send me a pull request. Bonus points for topic branches.

License

It is free software, and may be redistributed under the terms specified in the LICENSE file.

Contributors

A bit of advertising

Since 2010 lead my own software development company Cifronomika. We doing Ruby on Rails development. Feel free to contact us :-)

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-36053.html

文章标题:jquery-animateNumber

回到顶部