jQuery頁面改進

Question

我一直在玩這個頁面添加CSS3樣式和所有。

http://daokun.webs.com/jQuery/Progress.html

進度條是提供給我的Makotosan而使用CSS3通過MorrisLiang

平滑動畫的想法，我用這個網站的欄上創建一個對角線動畫，細節和色彩改變。同樣的按鈕也是這樣。

http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar

現在我很滿足於此，它得不錯，但在酒吧從0％通過任何東西，反之亦然它立即自敗讓我困擾的。 CSS3過渡適用於寬度很小的工作，但當條更改爲0％時，它不再適用於寬度，而是應用於顯示樣式。它通過display：block顯示：沒有女巫會立即消失。無論如何要讓這一點順利到達0％，否則我只能忍受酒吧瞬間空空蕩蕩？

另一件事，從上面的網站上顯示的進度條，我想在欄上顯示一個文本顯示它的當前％。不在中間位置，如在價值欄後面的網站，並且價值平穩變化。

這是CSS頁面如果需要的話：http://daokun.webs.com/jQuery/myUi.custom.css

對於HTML查看源代碼應該enougt。

Answer 1

位，在源，它說：

progress.progressbar('value', progress.progressbar('value') - 5); 

更改爲：

if(progress.progressbar('value') == 5) { 
    progress.animate({width: '0%'}, 200); 
} else { 
    progress.progressbar('value', progress.progressbar('value') - 5); 
} 

，而其它比特：

progress.progressbar('value', progress.progressbar('value') + 5); 

應改爲：

if(progress.progressbar('value') == 0) { 
    progress.animate({width: '5%'}, 200); 
} else { 
    progress.progressbar('value', progress.progressbar('value') + 5); 
} 

對於要更改的值，您希望使用使用setTimeout的自執行函數（而不是setInterval，因爲這不會等待函數在下一個函數之前完成一次調用）。此函數會將span的值設置爲進度條的當前寬度 - 而不是我認爲的進度條值，即使它位於兩個值之間，它只會返回您最後設置的值（即5的倍數）。

您還需要在上述動畫函數的回調中設置進度條的值，但請注意，當從0到5的動畫效果時，您需要設置progress.find(".ui-progressbar-value").css({display: "block"})。我無法給你所有的答案，所以我會讓你找出修改的地方。