Блог

Главная - Вопросы по программированию - Пользовательские индикаторы выполнения Jquery не анимируются

Пользовательские индикаторы выполнения Jquery не анимируются

#javascript #jquery #animation

#javascript #jquery #Анимация

Вопрос:

У меня вопрос о том, как правильно анимировать этот код. Я пытаюсь создать индикатор выполнения, который анимируется на основе небольшого алгоритма, который я построил, но он не анимируется. Вот мой код:

 function WidthGenerator() {
"use strict";
var question = prompt("Enter number of hours worked:", "Enter here");
if (isNaN(Number(question)) === false) {
    var generateMultiplier = Math.ceil(Math.random() * 4);
    alert(generateMultiplier);
    var newWidth = question * generateMultiplier;
    alert(newWidth);
    return newWidth;
} else {
    question = prompt("That is not a number; Enter the number of hours worked.", "Enter here");
}
}

$(document).ready(function () {
"use strict";
$('#Progress-Button').click(function () {
    var animateWidth = WidthGenerator();
    var widthCheck = $('#Progress-Bar').css('width');
    if (widthCheck < animateWidth) {
        $('#Progress-Bar').animate({
            width: ' =1%'
        }, 1000);
    } else {
        $('#Progress-Bar').stop();
    }
});
});

Кроме того, я пытаюсь выяснить, как увеличить его при каждом нажатии кнопки. Пример: пользователь генерирует 20% заполненного индикатора выполнения, затем снова запускает генератор и генерирует дополнительные 30%. Как бы мне сделать так, чтобы индикатор выполнения показывал 50%?

Спасибо!

Комментарии:

1. Не могли бы вы связать jsfiddle , чтобы с вашим кодом можно было играть?

2. Вот и все! : D jsfiddle.net/jo1t7fnL

3. Взгляните на строку 20 в вашем javascript. Вы сравниваете ширину #Progress-Bar, которая равна 0px, с целым числом, полученным из функции. Кроме того, последовательность анимации при добавлении 1% кажется неправильной.

Ответ №1:

В соответствии с тем, что @Jabaluza указал выше.

Изменить: $('#Progress-Bar').css('width'); на: $('#Progress-Bar').outerWidth();

Не уверен, что это дает вам желаемый результат, но первый возвращает строку с ‘px’ в ней, последний возвращает искомое число.