jQuery animate()函数

Question

我有一个健康栏(0%生命值= 0px宽度; 100%生命值= 100px):

<div style="width:<?php echo $health ?>"><?php echo $health ?></div>

用户点击"治疗"按钮后,他会收到一些健康状况.使用该animate()功能我制作了条形以增加其宽度.

但我还需要其他东西:更新div内的健康值.我也想为它设置动画(以获得与宽度相同的增加值).

但我不知道怎么做.你能帮我吗？

LE:

$('div').animate({ width: data.newhealth }, duration: 1500);

它在getJSON函数中.

我认为解决方案是$('div').attr('width')在动画期间经常更换div的内容,但我也不知道如何做到这一点.

Answer 1

您可以使用stepanimate功能选项.我在这里有一个工作示例:http://jsfiddle.net/WxecS/

重要的是:

$('#healer').click(function() {
    $('#div').animate({
        width: '100%'
    }, {
        step: function(now, fx) {
            $(this).text(Math.floor(now) + '%');
        }
    })
});