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

Question

背景

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

我正在寻找插件来执行此操作，但找不到可以添加上图所示的小圆圈步骤的插件，因此我使用 jQuery.

创建了自己的插件

问题与问题

目前，我能想到的 "best" 方法是将多个 .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>

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

或者是否有 jQuery 提供的 "shortcut" 或其他有助于解决此类情况的插件？

目前在我的 fiddle 中，我正在使用 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

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

Chain together multiple jQuery animations to progressively animate color

javascript

jquery

animation

jquery-color

progress-bar

背景

问题与问题