Считайте от 0 до 100 за 7 секунд, выполняя jQuery.animate() для индикатора выполнения

У меня есть простой индикатор выполнения, который должен перейти от 0 до 100% ширины за 7 секунд. У меня нет проблем с обработкой операций, это просто должно быть 7 секунд.

Код на самом деле так прост:

$('.progress-bar').animate({width:'100%'}, 7000);

Ширина прогресса составляет 0%, поэтому мне просто нужно оживить его до 100%. Моя проблема заключается в том, что мне также нужно сосчитать от 0 до 100, чтобы показать проценты так же, как я делаю для прогресса (в течение 7 секунд).

Как я могу это сделать?

Спасибо!

Источник

4 ответа

Решение

http://jsfiddle.net/C23YM/9/

В основном передать в функцию step вариант, и на каждом step позвоните, проверьте, width это анимированное, так как у вас может быть, например, анимируемое два свойства.

Из документов:

Обратите внимание, что функция шага вызывается для каждого анимированного свойства каждого анимированного элемента. Например, для двух элементов списка функция шага запускается четыре раза на каждом шаге анимации.

$('.progress-bar').animate(
    {width:'100%'}, 
    {
        duration:7000,
        step: function(now, fx) {
           if(fx.prop == 'width') {
               $(this).html(Math.round(now * 100) / 100 + '%');
           }
        }
    }        
);​
Источник

Вы можете использовать анимацию "от" "до" логики;

var _start = {property: 0};
var _end = {property: 100};

jQuery(_start).animate(_end, {
    duration: 7000,
    step: function() {
    $('.progress-bar').css('width', this.property + "%");        
    //console.log( 'Current percentage is ' + this.property );// You can write this to your bar

    }
});

Вы можете сослаться здесь

Вы можете искать как "шаг" на этой странице

Источник

Если вы посмотрите на документацию по анимации http://api.jquery.com/animate/ вы можете использовать шаговый метод, который вызывается на каждом шаге анимации.

Во второй версии.animate() предусмотрена опция шага - функция обратного вызова, которая запускается на каждом шаге анимации. Эта функция полезна для включения пользовательских типов анимации или изменения анимации по мере ее появления. Он принимает два аргумента (сейчас и fx), и это устанавливается для анимируемого элемента DOM.

now: числовое значение свойства, анимируемого на каждом шаге fx: ссылка на объект-прототип jQuery.fx, который содержит ряд свойств, таких как elem для анимированного элемента, start и end для первого и последнего значения соответственно свойство animated и prop для свойства animated.

Таким образом, вы можете использовать это, чтобы получить текущее значение ширины, так как в процентах вы должны получить значение, которое точно соответствует ширине элемента (например, получить 70 для 70%)

Источник

Что-то вроде того?

var starttime = (new Date()).getTime();

function updateTime() {
    var timediffPerc = ((new Date()).getTime() - starttime) / 70000;
    $('#percentage').text(timediffPerc.toFixed(2) + "%");
    if(timediffPerc<100) window.setTimeout(updateTime, 100);
}

Вам понадобится HTML-элемент с id = "процент", где будет отображаться процент.

Источник
Другие вопросы по тегам