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

您假设this轮流指向每个酒吧;它没有，因为没有像each回调（循环）的情况那样改变上下文。所以：

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

Answer 2

要为每个元素设置动画，您必须使用循环处理它。只有＆＃39;这个＆＃39;这还不够。

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

Answer 3

.data("height")不是.data("data-height")
如果您希望在每次之后运行每个超时，则需要设置超时。

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

循环遍历元素并逐个动画

3 个答案: