将多个 jQuery 动画链接在一起以逐步为颜色设置动画答案

【问题标题】：Chain together multiple jQuery animations to progressively animate color将多个 jQuery 动画链接在一起以逐步为颜色设置动画
【发布时间】：2015-04-09 20:53:00
【问题描述】：

背景

我正在创建一个进度条，其中包含随着更多步骤完成而动画的步骤（向导样式，在每个连续的 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) 的第四个animate() 呼叫时遇到问题，因为第四个div 没有动画。我没有在小提琴中包含这一点。

或者是否有可能由 jQuery 或其他插件提供的“快捷方式”来帮助解决这种情况？

目前在我的小提琴中，我正在使用 jQuery 和 jQuery Color 以及 Bootstrap，以与我正在处理的项目保持一致。

这是一个fiddle。

【问题讨论】：

标签： javascript jquery animation progress-bar jquery-color

【解决方案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

【讨论】：