使用jquery動畫元素的高度

Question

我有一些酒吧充滿了高度％，但當頁面加載時，我想所有酒吧填滿，然後減少到0.我知道如何填補它與一個循環：

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

，但有它回來下來

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

我只是不知道如何把它們放在一起，使變量i去100則下降回落到0？

Answer 1

您正在尋找：

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

但是，你可能只是這樣做slideUp：

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

像你想的上面將動畫的元素。該代碼相當於大致有以下幾種，如果你甚至想要做更復雜的animate動畫：

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

更新：這裏是一個jsFiddle示範。

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/slideDown個函數已經這樣做了：

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

文檔爲.animate()：http://api.jquery.com/animate

Google文檔.slideUp()：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

花花公子滑行。檢查它 - http://jsfiddle.net/6hp2G/。像老闆一樣工作