jQuery Animate逐个跨越div

Question

我正在构建某种类型的单条jQuery图表，除了填充动画外，一切顺利，我的脚本所有部分都在同一时间生成动画。我想让每个部分动画，完成，等待0.1秒，然后通过下一个。

＆＃13;

＆＃13;

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

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

});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：最后一部分的换行没问题，因为在我的应用程序中它完美无缺。

Answer 1

只需在每个delay之前添加animation，如下所示：

<强> 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. 将您的元素集合存储在变量
中
2. 使用animate
中的成功回调，采用异步方法
3. 在检查数组长度时增加每个成功回调中的索引

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

试

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