jquery를 사용하여 요소의 높이에 애니메이션 움직이기

Question

높이가 %로 채워지는 막대가 몇 개 있지만, 페이지가로드 될 때마다 막대가 채워지기를 바라고 0으로 줄입니다. for 루프 :

for(i = 1; i <= 100; i++) 

하지만은 그것이 내가 그냥 100로 이동 변수를 만들기 위해 함께 넣어 다음 아래로 다시 감소하는 방법을 잘 모르겠어요 다시 아래로

for(i = 100; i == 100; i--) 

를 제공해야합니다 0?

Answer 1

당신이 찾고 :

for(i = 100; i >= 0; i--) 

그러나 당신은이 slideUp을 할 수있는 : 당신이 원하는 것처럼

$('someElement') 
    .hide() 
    .slideDown(500, function() { 
     $(this).slideUp(500); 
    }); 

은 위의 요소를 애니메이션 것입니다. 여기jsFiddle 데모입니다 :

$('someElement') 
    .hide() 
    .animate({ height: '100%' }, 500, function() { 
     $(this).animate({ height: 0 }, 500); 
    }); 

업데이트 : 그 코드는 경우에 당신은 훨씬 더 복잡 animate 애니메이션을하고 싶은, 대략 다음과 동일합니다.

Answer 2

나는 jQuery animate이 (가) 당신이 찾고있는 제품입니다. 결과는 this과 같습니다.

Answer 3

두 번째는해야한다 :

for(i = 100; i >= 0; i--) 

Answer 4

이 방법에 대해 :

for(i = 100; i >= 0; i--) 

Answer 5

당신이 다음 개체 난 당신이 jQuery를의 .animate() 기능을 원한다고 생각의 높이를 애니메이션하려는 경우 :

$('.bar-elements').animate({ height : '100%' }, 1500, function() { 
    $(this).animate({ height : 0 }, 1500); 
}); 

또는 대안 당신은 slideUp/을 사용할 수 있습니다 이 이미 수행개 기능 : .slideUp()에 대한 http://api.jquery.com/animate

문서 : .animate()에 대한

$('.bar-elements').hide().slideDown(1500, function() { 
    $(this).slideUp(1500); 
}); 

문서 http://api.jquery.com/slideup

Answer 6

당신은 하나 개의 루프에서 모든 작업을 수행 할 수 있습니다

for(var i = 0; i <= 200; i++) { 
    var height = (i <=100) ? i : 200 - i; 
} 

변수 height은 0에서 100으로 이동 한 다음 0으로 되돌아갑니다.

Answer 7

dude slideToggle. 확인 - http://jsfiddle.net/6hp2G/. 보스처럼 작동