jQuery 在 div 中逐个动画跨度

Question

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

$('#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>

注意：最后一部分的包装没有问题，因为在我的应用程序中它运行完美。

Answer 1

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

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

将元素集合存储在变量中
通过使用 animate

异步

在检查数组长度时增加每个成功回调中的索引

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

jQuery 在 div 中逐个动画跨度

jQuery Animate spans in a div one by one

jquery

jquery-animate