요소 집합을 반복하고 애니메이션을 적용합니다.

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); 
    })