連続して幅をスライディングしアニメーション化する方法

Question

divを使ってdivを作成し、幅をアニメーション化するにはどうすればいいですか？

jqueryのドキュメントのWebサイトは、例を見ています。私は多分これについて新しい約束を使うことができますか？

私が試してみました：

$foo.slideDown({duration:500},function(){ 
    $dropDown.animate({"width": 400}, 450); 
}); 

そして

$foo.slideDown({duration:500}).animate({"width": 400}, 450); 

をどちらも次々に行います。

Answer 1

「キュー」

$foo.slideDown({duration:500, queue:false}).animate({"width": 400}, 450); 

Answer 2

あなたが設定した高さを持っている場合は、あなただけの最初の例は動作しません。代わりに

$foo.show().animate({"width":500,"height":500},450); 

Answer 3

アニメーションを使用することができますをクリアしようとし、機能しますので、 slideDownアニメーションが終了したときにのみ呼び出されます。

2番目の例は、まったく同じことを、まったく異なる方法で実行します。

しかし、あなたはちょうどそうのように両方の機能を呼び出す場合：

$foo.slideDown({duration:500}); 
$dropDown.animate({"width": 400}, 500); 

彼らが並行して実行する必要があります（または、多かれ少なかれ、ように見えます）。

Answer 4

たぶん、あなたはこのような何かを探して：

W = $foo.css('width')==orgWidth ? 400 : orgWidth; 
$foo.animate({height: "toggle", width: W}, 500); 

Fiddle here!

それとも滑り落ちるのため：私はより多くのを見てきた後の答えを更新し

$foo.animate({height: "show", width: 500}, 500); 

Another Fiddle here!