첫 번째 자녀를 끝까지 이동하는 방법?

Question

div 컨테이너에 div 항목이 몇 개 있고 계속 애니메이트하려고합니다.

내 함수를 무한 루프로 실행하는 방법을 알고 있지만 첫 번째 div를 선택하고 애니메이션을 적용한 다음 애니메이션을 마친 후 끝으로 이동하는 데 문제가 있습니다.

내 기능은 다음과 같습니다 : 내가 잘못

function MoveItems() { 
     $(".container:first").animate(
      {width: "0px"}, 
      1000, 
      function(){ 
       $('.container').append($(this)); 
       $('.container').remove($(this)); 
      } 
     ); 
}; 

을 뭘하는지?/

편집 :

당신이 바로 대한 제거되지만 애니메이션이 여전히 작동하지 않습니다.

저는 셀렉터가 핵심적으로 작동하지 않는다고 생각합니다.

<div class="container"> 
<div class="image"><a href=""><img src="img/image001.jpg" /><span>IMAGE001</span></a></div> 
<div class="image"><a href=""><img src="img/image002.jpg" /><span>IMAGE002</span></a></div> 
<div class="image"><a href=""><img src="img/image003.jpg" /><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg" /><span>IMAGE004</span></a></div> 
</div> 

하지만 기능 MoveItems를 실행 한 후 한 번있다 :

내 HTML은

<div class="container" style="width: 0px; overflow: hidden;"> 
    <div class="image"><a href=""><img src="img/image001.jpg"><span>IMAGE001</span></a></div> 
    <div class="image"><a href=""><img src="img/image002.jpg"><span>IMAGE002</span></a></div> 
    <div class="image"><a href=""><img src="img/image003.jpg"><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg"><span>IMAGE004</span></a></div> 
</div> 

그래서 기능이 .container에 컨테이너 아니 첫 아이를 운영하고 있습니다. 내가 좀 더 구체적인가? :)

Answer 1

$(".container:first")은 발견 된 첫 번째 컨테이너를 선택합니다.

당신은 $(".container>div:first")이

또한 "속도"수 원하는 최종 제거/부모에서 작동하는 대신 .container에 대한 또 다른 DOM 검색을 수행하여 추가 : 정확히 문제가 무엇입니까

var $me = $(this); 
$me.parent().append($me); 

Answer 2

제거 라인이 :

$('.container').remove($(this)); 

APPEND는()는 타겟의 단부에 자신의 현재 위치로부터 선택된 객체를 이동 복사본을 생성하지 않는다.

Answer 3

append은 자동으로 상위에서 하위를 제거하고 끝에 배치합니다. remove은 다시 추가하지 않고 자식을 다시 제거합니다. $('.container').remove($(this)); 여기

Answer 4

이 더 실용적인 예제 : 당신이 모든 요소의 항목에 애니메이션을 적용 할 수 있도록 http://jsfiddle.net/8KyCD/1/

는 그것은 jQuery 플러그인을 생성

그냥 줄을 놓습니다. 당신은 이미 그 작업을 수행하는 방법을 알고 말했듯이 나는, 루프를 설정하지 않은)

편집 : 여기에 다음 요소를 숨 깁니다을 보여줍니다 또 다른 예, 그리고 영원히 반복 : http://jsfiddle.net/8KyCD/5/(documented code)