循环遍历一组元素并设置动画答案

【问题标题】：loop through a set of elements and animate循环遍历一组元素并设置动画
【发布时间】：2013-09-27 21:39:26
【问题描述】：

我有一组元素，当我单击特定按钮时，我想使用 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);
    })

但问题是在第一个动画之后，我无法继续其余的！如何循环遍历元素以在每个元素中滑动。

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

你需要保留和索引

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

【讨论】：

【解决方案2】：

试试jquery的.each()，

$('.left-arrow').click(function(){
        $('.image').each(function(){
          $(this).animate({
            width:'0px'
        },1000);
    })

【讨论】：