jqueryを使用して要素の高さをアニメ化する

Question

高さ％で塗りつぶされたいくつかの棒がありますが、ページが読み込まれるとすぐにすべての棒がいっぱいになり、0になります。 forループA：

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

は、上記の要素をアニメーション化します。

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

アップデート：ここではjsFiddleデモでそのコードは大体あなたはさらに複雑animateアニメーションをしたい場合には、次のように相当します。

Answer 2

私はjQuery animateがあなたが探しているものだと思います。結果はthisのようなものです。

Answer 3

二つ目は次のようになります。

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

Answer 4

これはどう：あなたがオブジェクトの高さをアニメーション化しようとしているなら、私はあなたがjQueryのの.animate()機能をしたいと思います

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

Answer 5

：

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

slideUp/すでにこれを行うの機能：.animate()ため

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

ドキュメント：.slideUp()ためhttp://api.jquery.com/animate

ドキュメント：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/。上司のように働く