如何使用 Jquery 为数字设置动画 [英] how to animate numbers using Jquery

问题描述

我正在尝试将 233 美元变为 250 美元或从 250 美元减少到 233 美元的动画，我不想将 233 替换为 250 而是我想要一种计数器效果，并且在滚动数字时还需要缩放效果.我是 Jquery 的新手，任何帮助将不胜感激.

I am trying to animate a say $233 to $250 or decreasing from 250 to 233 ,i dont want to replace 233 by 250 instead i want a counter kind of effect and at the time of scrolling numbers zoom effect is also required. i am new to Jquery any help would be highly appreciated.

推荐答案

HTML

<button id="start">Start</button>
<button id="reset">Reset</button>
<input id="counter" value="233"/>

JavaScript

$(function ()
{
    var $start = $('#start'),
        start = $start.get(0),
        $reset = $('#reset'),
        reset = $reset.get(0),
        $counter = $('#counter'),
        startVal = $counter.text(),
        currentVal = startVal,
        endVal = 250,
        prefix = '$',
        fontSize = $counter.css('font-size');

    $start.click(function ()
    {
        this.disabled = true;
        var i = setInterval(function ()
        {
            if (currentVal === endVal)
            {
                clearInterval(i);
                reset.disabled = false;
                $counter.animate({fontSize: fontSize});
            }
            else
            {
                currentVal++;
                $counter.text(prefix+currentVal).animate({fontSize: '+=1'}, 100);
            }
        }, 100);
    });

    $reset.click(function ()
    {
        $counter.text(prefix + startVal);
        this.disabled = true;
        start.disabled = false;
    }).click();
});

演示 →

这篇关于如何使用 Jquery 为数字设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！