【jQuery】jQueryを使ったアニメーションカウントプラグインjquery.animateNumber

jQuery

jquery.animateNumber

January 14, 2018

jquery.animateNumberはjQueryを使ったアニメーションカウントプラグイン。アニメーション関数のプロパティに ‘number’プロパティとstep関数を追加します。

Example 1: simple animation

<p>This plugin only <span id="lines">0</span> lines of code.</p>

$('#lines').animateNumber({ number: 165 });

Example 2: separators

<p>World population is <span id="world-population">0</span>.</p>

var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#world-population').animateNumber(
  {
    number: 7095217980,
    numberStep: comma_separator_number_step
  }
);

Example 3: multiple properties

<p>Fun level <span id="fun-level" style="color: red;">0 %</span>.</p>

var percent_number_step = $.animateNumber.numberStepFactories.append(' %')
$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green',
    'font-size': '30px',

    easing: 'easeInQuad',

    numberStep: percent_number_step
  },
  15000
);

MIT

Latest Posts

Related Posts