Функция jQuery animate ()

Question

У меня есть индикатор здоровья (0% здоровья = 0px width; 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') очень часто во время анимации, но я тоже не знаю, как это сделать.

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

используйте шаг : , как описано на jquery site

Answer 4

использовать полный обратный вызов .animate()
http://api.jquery.com/animate/

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