动画不会停在变量值上

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);
});