Question

背景

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

enter image description here 我寻找插件来做到这一点，但我找不到一个我可以在上面的图像的小圆步骤中添加，所以我用jQuery创建自己的。

问题＆amp;问题

目前，我能想到实现这一目标的“最佳”方法是将多个.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的正确方法？我似乎在使用animate()进行第4次:lt(4)来电时遇到问题，因为第4次div没有动画效果。我没有在小提琴中加入这一点。

或者是否可能有jQuery或其他插件提供的“快捷方式”来帮助这样的案例？

目前在我的小提琴我使用jQuery和jQuery Color以及包含Bootstrap以保持与我正在进行的项目保持一致。

这是 fiddle 。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

此处的额外奖励是根据您的图片将最后一个元素变为绿色的版本...... JSFIDDLE

将多个jQuery动画链接在一起，逐步动画颜色

背景

问题＆amp;问题

1 个答案: