Question

我有一个健康栏（0％生命值= 0px宽度; 100％生命值= 100px）：

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

用户点击“治疗”按钮后，他会收到一些健康状况。使用animate()函数我使条形图增加了它的宽度。

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

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

L.E：

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

它在getJSON函数中。

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

Answer 1

您可以使用step选项来设置animate功能。我在这里有一个working example：http://jsfiddle.net/WxecS/

重要的一点是：

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

使用jquery site

中描述的步骤功能

jQuery animate（）函数

4 个答案: