Jquery自定義進度條沒有動畫

我有一個關於如何使這段代碼正確動畫的問題。我試圖根據我製作的一個小算法制作一個動畫進度條，但它不具有動畫效果。這裏是我的代碼：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％？

謝謝！

來源

2016-10-10 Ian

你可以鏈接[jsfiddle]（https://jsfiddle.net/），這樣你的代碼就可以玩了嗎？ –

在這裏，你去！：D https://jsfiddle.net/jo1t7fnL/ – Ian

看看你的JavaScript中的第20行。您正在比較＃Progress-Bar的寬度（0px）與您從函數獲得的整數。此外，通過增加1％的動畫序列似乎是錯誤的。 – Fantasterei

沿着@Jabaluza指出的路線。

變化：$('#Progress-Bar').css('width'); 到：$('#Progress-Bar').outerWidth();

不知道這是否給你你想要的結果，但首先是恢復與它「PX」的字符串，後者將返回你要找的數量。

來源

2016-10-10 21:44:56

Jquery自定義進度條沒有動畫

回答

相關問題