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

您可以使用动画函数的 step 选项。我这里有一个工作示例：http://jsfiddle.net/WxecS/

重要的是：

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

Answer 2

这不会为文本设置动画，但会在最后更改它：

http://jsfiddle.net/Ncv7Z/4/

$('#animate').animate({
    width: '100px'
}, 3000, function(){
    this.innerHTML = $(this).width();
});

Answer 3

使用 .animate() 的完整回调
http://api.jquery.com/animate/

  $('#health').animate({
    width: 40
  },{ duration: 1000, step: function() {
    $("#health").text($(this).width());
  }});

Answer 4

使用 step: 函数，如 jquery 站点 中所述