Анимация числа, при изменении ширина HTML элемента
 

Здравствуйте! Помогите разобраться с динамической анимацией числа в блоке, интересует решение только на чистом javascript.

Имеется блок с размерами 25 на 25px, в блоке находится число (0%), при клике по этому блоку происходит событие, которое задает блоку величину (в данном случае 75%), после чего его ширина плавно увеличивается на заданную величину. Но как привязать это динамическое увеличение и к числу, чтобы увеличение числа так же происходило синхронно при увеличении ширины блока до заданного числа, то есть до 75%?

Вот пример http://jsfiddle.net/...mbedded/result/

Может есть какое то событие, которое отслеживает состояние блока?

Буду благодарен, если подтолкнете в нужном направлении:)

akkord87, а что заставляет изменять ширину блока? Вот туда и нужно просто добавить ещё и изменение числа.

Ок, а не подскажите, как изменить это число? При помощи setInterval? Или есть более удобные способы? Просто нужно добиться, чтобы увеличение числа и изменение ширины этого блока происходило одновременно.

akkord87, там при изменении блока, у самого скрипта, который меняет этот блок, у него должно быть событие изменения размера - туда и подставляйте.

this.innerHTML = this.style.width;

Это понятно) Не понятно, как сделать так, чтобы увеличение числа шло плавно (анимировано) 0% 1% 2% 3% ... 75% http://goo.gl/3VH4ID

Интересный пример) Но мне нужно увеличить число от 0 до 75%, анимировать сам процесс увеличения)

akkord87,
Нет разницы от скольки и до скольки увеличивать, это настраивается стилями. И время анимации тоже.

А как сделать анимацию увеличения числа процентов?

Ой, html стилями менять не выйдет, не внимательно посмотрел.

<div style="background: green; width: 0%">0%</div>

<script>

var animate = function (options) {
        var start = Date.now(); // сохранить время начала

        requestAnimationFrame(function tick() {
            var timePassed = Date.now() - start;
            var progress = timePassed / options.duration;
            var timeFunction = options.timeFunction || function (progress) {
                        return progress;
                    };
            progress = progress > 1 ? 1 : progress;

            options.step(timeFunction(progress));

            if (progress === 1) {
                options.complete();
            } else {
                requestAnimationFrame(tick);
            }

        });
    };

var div = document.querySelector('div');

animate({
   duration: 5000,
   step: function (progress) {
      var percent = Math.round(75 * progress) + '%';
      div.innerHTML = percent;
      div.style.width = 75 * progress + '%';
   },
   complete: function () {}
});

</script>