遍历元素和动画逐一

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>

Answer 2

你假设this依次指向每个栏;它没有，因为没有上下文的变化，例如each回调（循环）。所以：

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

Answer 3

要通过每个元素动画，你必须使用循环来处理它。只有'这'是不够的。

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