Question

我正在尝试实现一个动画计数器，现在我已经查询了数据库以计算行数，并在页面上输出数字。

我想设置该数字的动画，使其从0-“值”开始计算。

我创建了一个简单的jquery动画;

$('.count').each(function () {
$(this).prop('Counter',0).animate({
    Counter: $(this).text()
}, {
    duration: 4000,
    easing: 'swing',
    step: function (now) {
        $(this).text(Math.ceil(now));
    }
 });
});

现在我正在努力让这个动画显示出来。该数字是网站上的用户数。

  <div id="users"

有没有办法让动画从0动画到ID用户（ID加载mysql查询计数）。让我们举例来说，行数是20。这可能很简单，但我不是搞清楚了！

（我不是想设置静态数字的动画，因为更多用户注册的数字会增加）。

任何帮助将不胜感激！谢谢，约翰

Answer 1

我认为你所做的事情可能有效，但我不确切知道每个人的目的是什么？

我偶然发现了同样的事情^^这是我写的功能。你应该在轮询数据库之后调用它，它会将当前的数字更新为新数据。

function numberAnimation(id, value) {
    number = $("#"+id).text();

    jQuery({Counter: number}).animate({Counter: value},{
        duration: 500,
        easing: 'swing',
        step: function() {
            // What todo on every count
            $("#"+id).html(Math.floor(this.Counter));
        },
        complete: function() {
            $("#"+id).html(Math.floor(this.Counter));
        }
    });
}

你会这样称呼：numberAnimation('users',{Count});

PS。你需要先在div / span中加一个0，这样它就有一个从中开始计数的值。

如何设置MySQL查询计数的动画？

1 个答案: