打印進度條的百分比動畫時

我開發一個進度條，它的HTML看起來像這樣打印進度條的百分比動畫時

<div class="progressbar"><div class="text">%0 Completed</div> 
      <div class="progressbar_inner"></div> 
     </div>

，並使用這個jQuery代碼吧：

$(".progressbar_inner").animate({ 
       width:"20%" 
      },100,function(){ 
       $(".text").html("%20 Completed"); 
       });

我的問題是：我要打印動畫開始和結束時進度條的百分比。像這樣：％1已完成％2已完成等。任何人都可以幫助我嗎？

來源

2013-03-29 user2854865

而不是使用動畫的，寫自己的方法循環，並增加1寬度％使用'$（elem）.css（'width'，iterator +'％'）'。在每次迭代中，還將$（「。text」）。html（）設置爲您的迭代器值。 – Danwilliger

你的意思是我必須寫一個函數，包括稱爲「迭代器」或另一個？ – user2854865

您可以使用步選項動畫功能的：

$(".progressbar_inner").animate(
    {width:"50%"}, 
    {duration: 1000, 
    step: function(current_number){ 
     $(".text").html(Math.floor(current_number) + "% Completed"); 
    } 
    } 
);

見行動：http://jsfiddle.net/willemvb/JRqVw/

來源

2013-03-29 16:28:46

這工作！非常感謝威廉 – user2854865

打印進度條的百分比動畫時

回答

相關問題