jquery анимирует индикатор выполнения в процентах быстрее, чем индикатор (шаг)

Question

Я пытаюсь закодировать (фальшивый) индикатор анимации в jquery, я использую функцию animate(), это мой код:

$("#progress_bar").animate({width:"100%"},{
                    step: function( now, fx ) {
                    var data =  Math.round(now);
                    $( "#percent" ).html(data+' % ')},duration:8000}//function pourcentages


                ); //animate

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

Answer 1

Я воспроизвел ваш код, и он отлично работает.

Смотрите скрипку здесь

Вы анимируете только одно свойство? Если нет, вы можете использовать что-то вроде этого:

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
        if(fx.prop == 'width') { //If you animate more than 1 property
            var data =  Math.round(now);
            $( "#percent" ).html(data+' % ');
        }
    },duration:8000}//function pourcentages 
); //animate

Проверьте подобный пост для получения дополнительной информации

Answer 2

Вероятно, он анимируется в пикселях, даже если вы объявите свою инструкцию в%.

Выходные данные, которые вы получите, скорее всего, будут в пикселях элемента в данной точке.

Попробуйте что-то вроде этого:

$("#progress_bar").animate({width:"100%"},{
    step: function( now, fx ) {
    var max_width = [...];
    var actual_width =  Math.round(now);
    var data_perc = (actual_width / max_width) * 100;

    $( "#percent" ).html(data_perc+' % ')},duration:8000}//function pourcentages


); //animate

Замените [..] на максимальную ширину вашего бара (вероятно, ширину вашей оболочки бара).

Пример:

var max_width = $('#bar_wrapper').width();