javascript - 将多个 jQuery 动画链接在一起以渐进式动画颜色

Question

背景

我正在创建一个进度条，其中包含随着更多步骤完成而动画化的步骤(向导样式，在每个连续的 ajax 请求完成后进入下一步)。我想要的外观的一个很好的例子是亚马逊的运输跟踪，如下图所示。

我寻找插件来执行此操作，但找不到可以添加上图所示的小圆圈步骤的插件，因此我使用 jQuery 创建了自己的插件。

问题与问题

目前，我认为实现这一目标的“最佳”方法是将多个 .animate() 方法链接在一起，这些方法将 background-color 应用到一个又一个 DIV连续。我的 jQuery 代码如下所示:

$(function () {

    $(".progress-square:lt(1)").animate({
        backgroundColor: "#FABF03"
    }, 500, function () {
        $(".progress-square:lt(2)").animate({
            backgroundColor: "#FABF03"
        }, 500, function () {
            $(".progress-square:lt(3)").animate({
                backgroundColor: "#FABF03"
            }, 500);
        });
    });

});

我的 HTML 相当简单:

<div class="container">
    <div class="progress-bar-wrapper">
        <!--<div class="circle">put circle here</div>-->
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <!--<div class="circle">put circle here</div>-->
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <div class="progress-square"></div>
        <!--<div class="circle">put circle here</div>-->
    </div>
</div>

我想知道这是否是将多个 animate() 方法“链接在一起”以连续地动画一个 DIV 的正确方法？我使用 :lt(4) 的第 4 个 animate() 调用似乎有问题，因为第 4 个 div 没有动画。我没有在 fiddle 中包含这一点。

或者可能有 jQuery 或其他插件提供的“快捷方式”来帮助处理这种情况？

目前我正在使用 jQuery 和 jQuery Color以及包含 Bootstrap 以与我正在处理的项目保持一致。

这是一个 fiddle .

Answer 1

不需要所有这些回调。这将适用于任意数量的元素......

$(function () {  
    $(".progress-square").each(function(i) { // i is the index of the current element in the collection
        $(this).delay(500*i).animate({ // create a delay that is multiplied by the current index
            backgroundColor: "#FABF03"
        }, 500)
    });
});

.progress-bar-wrapper {
    margin: 10px;
    margin-top: 50px;
    width: 100%;
    float: left;
}
.progress-square {
    background-color: gainsboro;
    float: left;
    height: 20px;
    width: 10%;
    border-right: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

<div class="container">
        <div class="progress-bar-wrapper">
            <!--<div class="circle">put circle here</div>-->
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <!--<div class="circle">put circle here</div>-->
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>

作为一个额外的好处，这里有一个版本可以根据您的图像将最后一个元素变成绿色... JSFIDDLE