jQuery Animate spans in a div one by one

Question

I'm building some type of one-bar jQuery chart, everything goes well except for filling animation, with my script all the sections animate in the same time. I want to make each section to animate, complete, wait 0.1 sec then pass the the next.

$('#chart .chart-item').each(function() {

  $(this).animate({
    width: $(this).data('w') + '%'
  }, 1000);

});

.chart {
  width: 100%;
  margin-top: 40px;
  background: #eee;
}
.chart-item {
  display: inline-block;
  width: 0;
  height: 40px;
  border-left: 1px solid #fff;
}
.chart-item:first-child {
  border-left: none;
}
.chart-item:first-child {
  background-color: #0D47A1;
}
.chart-item:nth-child(2) {
  background-color: #1565C0;
}
.chart-item:nth-child(3) {
  background-color: #1976D2;
}
.chart-item:nth-child(4) {
  background-color: #1E88E5;
}
.chart-item:nth-child(5) {
  background-color: #2196F3;
}
.chart-item:nth-child(6) {
  background-color: #42A5F5;
}
.chart-item:nth-child(7) {
  background-color: #64B5F6;
}
.chart-item:nth-child(8) {
  background-color: #90CAF9;
}
.chart-item:nth-child(9) {
  background-color: #BBDEFB;
}
.chart-item:nth-child(10) {
  background-color: #E3F2FD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chart" class="chart">
  <span class="chart-item" data-w="40.80"></span>
  <span class="chart-item" data-w="28.56"></span>
  <span class="chart-item" data-w="16.93"></span>
  <span class="chart-item" data-w="13.54"></span>
</div>

NB: No problem for the wrap of the last section as in my app it works perfect.

Answer 1

Just add a delay before each animation as below:

DEMO HERE

var delay = 0;
$('#chart .chart-item').each(function() {
    $(this).delay(delay).animate({
    width: $(this).data('w') + '%'
    },500);
    delay += 500;

});

var delay = 0;
    $('#chart .chart-item').each(function() {
        $(this).delay(delay).animate({
        width: $(this).data('w') + '%'
        },500);
        delay += 500;
      
    });

.chart {
  width: 100%;
  margin-top: 40px;
  background: #eee;
}
.chart-item {
  display: inline-block;
  width: 0;
  height: 40px;
  border-left: 1px solid #fff;
}
.chart-item:first-child {
  border-left: none;
}
.chart-item:first-child {
  background-color: #0D47A1;
}
.chart-item:nth-child(2) {
  background-color: #1565C0;
}
.chart-item:nth-child(3) {
  background-color: #1976D2;
}
.chart-item:nth-child(4) {
  background-color: #1E88E5;
}
.chart-item:nth-child(5) {
  background-color: #2196F3;
}
.chart-item:nth-child(6) {
  background-color: #42A5F5;
}
.chart-item:nth-child(7) {
  background-color: #64B5F6;
}
.chart-item:nth-child(8) {
  background-color: #90CAF9;
}
.chart-item:nth-child(9) {
  background-color: #BBDEFB;
}
.chart-item:nth-child(10) {
  background-color: #E3F2FD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chart" class="chart">
  <span class="chart-item" data-w="40.80"></span>
  <span class="chart-item" data-w="28.56"></span>
  <span class="chart-item" data-w="16.93"></span>
  <span class="chart-item" data-w="13.54"></span>
</div>

Answer 2

1. Store your element collection in a variable
2. Take an asynchronous approach by using the success callback in animate
3. Increment the index in each success callback while checking array length

---

var arr = $('#chart .chart-item');
var index = 0;

function expand(index) {
  $(arr[index]).animate({
    width: $(arr[index]).data('w') + '%'
  }, 1000, function() {
    if (index < arr.length) {
       index++;
       expand(index);
    }
  });
}
expand(index);

var arr = $('#chart .chart-item');
var index = 0;

function expand(index) {
  $(arr[index]).animate({
    width: $(arr[index]).data('w') + '%'
  }, 1000, function() {
    if (index < arr.length) {
      index++;
      expand(index);
    }
  });
}
expand(index);

.chart {
  width: 100%;
  margin-top: 40px;
  background: #eee;
}
.chart-item {
  display: inline-block;
  width: 0;
  height: 40px;
  border-left: 1px solid #fff;
}
.chart-item:first-child {
  border-left: none;
}
.chart-item:first-child {
  background-color: #0D47A1;
}
.chart-item:nth-child(2) {
  background-color: #1565C0;
}
.chart-item:nth-child(3) {
  background-color: #1976D2;
}
.chart-item:nth-child(4) {
  background-color: #1E88E5;
}
.chart-item:nth-child(5) {
  background-color: #2196F3;
}
.chart-item:nth-child(6) {
  background-color: #42A5F5;
}
.chart-item:nth-child(7) {
  background-color: #64B5F6;
}
.chart-item:nth-child(8) {
  background-color: #90CAF9;
}
.chart-item:nth-child(9) {
  background-color: #BBDEFB;
}
.chart-item:nth-child(10) {
  background-color: #E3F2FD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chart" class="chart">
  <span class="chart-item" data-w="40.80"></span>
  <span class="chart-item" data-w="28.56"></span>
  <span class="chart-item" data-w="16.93"></span>
  <span class="chart-item" data-w="13.54"></span>
</div>

Answer 3

try

animate($('#chart .chart-item').eq(0));

function animate(elm) {

    $(elm).animate({
        width: $(elm).data('w') + '%'
    }, 1000);
    $(elm).promise().done(function (arg1) {
        if ($(elm).next().length) {
            animate($(elm).next());
        }

    });
}

DEMO