javascript - 循环遍历元素并逐个设置动画

Question

我正在尝试创建一个条形图，并且希望将每个条形动画显示出来...

我已经使用数据高度属性标记了我的条形图，如下所示...

<ul class="chart">
  <li><div class="top" data-height="48"></div><div class="bottom" data-height="52"></div></li>
  <li><div class="top" data-height="45"></div><div class="bottom" data-height="55"></div></li>
  <li><div class="top" data-height="45"></div><div class="bottom" data-height="55"></div></li>
  <li><div class="top" data-height="42"></div><div class="bottom" data-height="58"></div></li>
  <li><div class="top" data-height="45"></div><div class="bottom" data-height="55"></div></li>
  <li><div class="top" data-height="47"></div><div class="bottom" data-height="53"></div></li>
</ul>

我的js是...

$('.top, .bottom').animate({
   height : $(this).data("data-height") 
}, 1000);

只是我什么也没得到，有人能指出我做错了什么吗？

Answer 1

1. 它是.data("height")而不是.data("data-height")
2. 如果您想逐个运行，则需要设置一个超时时间。

$('li').each(function(i) {
    setTimeout(function(top, bottom) {
        top.animate({
            height: top.data("height") 
        }, 1000);

        bottom.animate({
            height: bottom.data("height") 
        }, 1000);
    }, i * 1000, $(".top", this), $(".bottom", this));
});

ul {
  list-style: none;
}
li {
  width: 50px;
  height: 100px;
  display: inline-block;
  margin-right: 10px;
}
li div {
  width: 50px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="chart">
  <li>
    <div class="top" data-height="48"></div>
    <div class="bottom" data-height="52"></div>
  </li>
  <li>
    <div class="top" data-height="45"></div>
    <div class="bottom" data-height="55"></div>
  </li>
  <li>
    <div class="top" data-height="45"></div>
    <div class="bottom" data-height="55"></div>
  </li>
</ul>

另一种方法，不要使用animate，而是使用css Transitions。 ;)

$("ul.chart li").each(function(i) {
    var li = $(this);

    setTimeout(function() {
        $('.top, .bottom', li).height(function() {
            return $(this).data("height");
        });
    }, i * 1000);
});

ul {
  list-style: none;
}
li {
  width: 50px;
  height: 100px;
  display: inline-block;
  margin-right: 10px;
}
li div {
  width: 50px;
  height: 0px;
  -webkit-transition: height 1s;
  -moz-transition: height 1s;
  transition: height 1s;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="chart">
  <li>
    <div class="top" data-height="48"></div>
    <div class="bottom" data-height="52"></div>
  </li>
  <li>
    <div class="top" data-height="45"></div>
    <div class="bottom" data-height="55"></div>
  </li>
  <li>
    <div class="top" data-height="45"></div>
    <div class="bottom" data-height="55"></div>
  </li>
</ul>