0

特定のボタンをクリックすると、jquery を使用して一度に 1 つの要素をアニメーション化する一連の要素があります。

これは私の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);
    })

しかし、問題は最初のアニメーションの後で、残りを続けることができません! 要素をループして各要素をスライドさせるにはどうすればよいですか。

4

2 に答える 2

0

保持してインデックスする必要があります

var index = 0, $imgs = $('.image');
$('.left-arrow').click(function(){
    $imgs.eq(index ).animate({
        width:'0px'
    },1000);
    index = index == 0 ? $imgs.length - 1  : index - 1 ;
})

デモ:フィドル

于 2013-09-23T04:19:33.727 に答える