我有一组元素,当我点击一个特定的按钮时,我想使用 jquery 一次为一个元素设置动画。
这是我的 html 标记。
<ul class="image-wrapper">
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
</ul>
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="overlay"></div>
<div class="menu"></div>
这是我为每个元素设置动画的 jquery 代码。
$('.left-arrow').click(function(){
$('.image').first().animate({
width:'0px'
},1000);
})
但问题是在第一个动画之后,我无法继续剩下的!我如何遍历元素以在每个元素中滑动。
最佳答案
你需要保留和索引
var index = 0, $imgs = $('.image');
$('.left-arrow').click(function(){
$imgs.eq(index ).animate({
width:'0px'
},1000);
index = index == 0 ? $imgs.length - 1 : index - 1 ;
})
演示:Fiddle
关于javascript - 遍历一组元素并设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18951678/