jquery animation 반복, 구문이 잘못 되었습니까?

Question

누군가 내 코드를 평가하고 올바른지 알려주십시오.

애니메이션을 하나씩 실행하고 5000 밀리 초 동안 일시 중지하고 높이를 모두 0으로 재설정 한 다음 애니메이션을 무기한 반복합니다.

function animateThis(){ 
      $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() { 
       $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() { 
        $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() { 
         $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() { 
          $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {    
           $('.bars div').delay(2000).css({"height" : "0"}), function() { animateThis()}; 
          }); 
         }); 
        });               
       }); 
      }); 
     } 
    $(".bars").ready(function(){animateThis()}); 

예

내가 어제받은 일부 답변에서 다시 포맷을 http://execusite.com/fazio/files/careers-banner/test.html

에서 볼 수 있지만 여전히 작동하지 않습니다와 나는 어떤 피드백을받지 못했습니다.

감사합니다.

Answer 1

당신은 이런 식으로 작업을 수행 할 수 있습니다

예 :http://jsfiddle.net/patrick_dw/T5acF/4/

function animateThis() { 
    var length = $('.bars div').stop().each(function(i, val) { 
     $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() { 
      if (i === (length - 1)) { 
       $('.bars div').animate({ height: 0 }, 2000, animateThis); 
      } 
     }); 
    }).length; 
} 

$(document).ready(function() { animateThis(); }); 

---

편집 : 다시 0에 애니메이션을 통보하지 않았다. 이 업데이트 된 버전으로 수정되었습니다.

편집 : 새로운 .each() 전에 .stop() 추가 내가 가지고 있던 문제를 정리하는 것 같았다.

편집 :$(this).index()을 i (동일한 색인을 나타냄)으로 대체하여 좀 더 효율적으로 만들었습니다.

---

분명히 충분히주의를 기울이지는 않습니다. 높이를 0으로 다시 애니메이션하고 싶지는 않지만 5000 밀리 초를 지연시키고 즉시 재설정하려고합니다.

예 :http://jsfiddle.net/patrick_dw/T5acF/5/

function animateThis() { 
    var length = $('.bars div').each(function(i, val) { 
     $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() { 
      if (i === (length - 1)) { 
       setTimeout(function() { 
        $('.bars div').height(0); 
        animateThis(); 
       }, 5000); 
      } 
     }); 
    }).length; 
} 

$(document).ready(function() { animateThis(); }); 

Answer 2

var animateThis = function(){ 
      $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() { 
       $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() { 
        $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() { 
         $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() { 
          $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {    
           $('.bars div').delay(2000).animate({"height" : "0"}, 0), function() { animateThis()}; 
          }); 
         }); 
        });               
       }); 
      }); 
     }; 
    $(".bars").ready(function(){animateThis()}); 

Answer 3

여기 delay(2000).css({"height" : "0"})

, 당신은 지연 후에 무엇을해야하는지에 대한 콜백을 지정하지 않은; .delay이 즉시 반환하기 때문에 .css 콜이 즉시 실행됩니다. 콜백이 제공된 경우 콜백을 설정하여 나중에 실행합니다.

.css()은 애니메이션으로 변경하지 않고 즉시 변경합니다. 변경 전까지는 여전히 지연이 있지만, 이전 전환이 움직이기 때문에 쉽게 혼란 스러울 수 있습니다. div로 자리를 잡으려는 것처럼 보이지만 이전 전환으로 인한 시간을 고려해야합니다. 즉, 이전 전환이 완료되기 전에 완료되기를 기다리는 것입니다.여기

, function() { animateThis() };

, 당신은 animateThis()를 호출하는 이름이 지정되지 않은 콜백 함수를 정의하지만, 실제로 전화를하지 않는다 - 당신이 기능을 제공하지 않은 (예 : 지연 cssanimate)가 콜백을받습니다. 실제로 마지막 전환을 애니메이션으로 만들지는 않겠지 만 css 대신 animate을 사용하면 콜백을 사용할 수 있습니다.

스티븐은 답에 해결책을 제공했습니다. 이 시도 :

$('.bars div').delay(4000).animate({"height": 0}, 0, function() { animateThis(); }) 

Answer 4

이 시도 :

function animateThis() { 
    var divs = $(".bars div").get(); 
    var time = 2000; 
    $(divs[0]).animate({'height': '49px'}, time, function() { 
     $(divs[1]).animate({'height': '112px'}, time, function() { 
      $(divs[2]).animate({'height': '174px'}, time, function() { 
       $(divs[3]).animate({'height': '236px'}, time, function() { 
        $(divs[4]).animate({'height': '298px'}, time, function() { 
         setTimeout(function() { 
          $(divs).css('height', '0px'); 
          animateThis(); 
         }, time); 
        }); 
       }); 
      }); 
     }); 
    }); 
} 

참고 :이 코드는 중복입니다. 코드를보다 효율적으로 만드는 방법을 보여주기 위해 (불필요한 선택기 쿼리를 제거하여) 작성했습니다. 내가 너라면 패트릭의 대답으로 갈거야.