javascript - Chain together multiple jQuery animations to progressively animate color -
background
i creating progress bar steps animates more steps completed (wizard style after each successive ajax request finishes goes next step). example of i'm going amazon's shipping tracking, pictured below.
looked plugins this, couldn't find 1 add in little circle steps image above, creating own jquery.
issue & question
currently "best" way can think accomplish chaining multiple .animate() methods apply background-color 1 after divs in row. jquery code looks this:
$(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); }); }); }); and html rather simple:
<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> i wondering if correct way "chain together" multiple animate() methods successively animate 1 div after another? seem having issues 4th animate() call using :lt(4) because 4th div not animate. did not include bit in fiddle.
or there possibly "shortcut" provided jquery or plugin helps case this?
currently in fiddle using jquery , jquery color bootstrap included stay consistent project working on.
here fiddle.
there no need of callbacks. work number of elements...
$(function () { $(".progress-square").each(function(i) { // index of current element in collection $(this).delay(500*i).animate({ // create delay multiplied 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>as added bonus here version turns last element green per image... jsfiddle