通過一組元素循環並生成動畫

Question

我有一組元素，當我點擊一個特定的按鈕時，我想使用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); 
    }) 

但問題是第一個動畫後，我不能繼續休息！我如何循環瀏覽元素以在每個元素中滑動。

Answer 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

Answer 2

嘗試jQuery的.each()，

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