jQuery 动画（）函数答案

【问题标题】：jQuery animate() functionjQuery 动画（）函数
【发布时间】：2011-08-30 18:35:48
【问题描述】：

我有一个健康栏（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 的内容替换为$('div').attr('width')，但我也不知道该怎么做。

【问题讨论】：

我们可以看看你的动画函数调用吗？
您不能使用animate 函数本身来更改实际内容值。您必须在宽度动画期间通过回调来执行此操作。

标签： jquery html jquery-animate

【解决方案1】：

您可以将step 选项用于动画功能。我在这里有一个working example：http://jsfiddle.net/WxecS/

重要的是：

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

【讨论】：

谢谢，这正是我想要的。
不错的...而且比我想象的要好。我是trying to use setInterval :\ 哦，好吧。 +1
+1，我对这个问题的最佳解决方案很感兴趣。非常好。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

虽然实际上不会对其进行动画处理：\ 发帖人想要为听起来像的文本制作动画。
它不会为文本设置动画。解决方案是在animate函数期间重复显示$('div').attr('width')。

【解决方案4】：

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

【讨论】：