動畫不停止在變量值

Question

爲什麼百分比不會在第一次動畫之後停止。那就在填充欄之後。

$('.perctext').delay(1500).each(
    function(a) 
     $(this).delay(a*250).animate({ 
    'left':width 
    },1000); 
}); 

FIDDLE

我缺少什麼？

預先感謝您。

解決方案：檢查Blender波紋管的答案。 FIDDLE WITH SOLUTION

Answer 1

你爲你的選擇相匹配的元素，每次查詢DOM，所以第一條一類的perctext一個元素相匹配，第二條以前條的百分比文本元素和自身，以及相匹配第三個酒吧匹配所有三個。

商店中的一個變量創建的元素和動畫只有特定的一個

var $perctext = $('<div>', {'class': 'perctext', text: width}); 
$perctext.appendTo(this); 

$perctext.delay(1500).each(function(a) { 
    $(this).delay(a * 250).animate({ 
     'left': width 
    }, 1000); 
});