divsを "float"にする

Question

漠然としたタイトルのため申し訳ありませんが、別の方法で名前を付けることはできません。

my pageを見て、「hi」と表示されているボタンをクリックすると、上部のボックスが消え、下部のボックスがその位置になります。さて、ボトムボックスが上に移動すると、それは即座に実行されます。どのようにしてトップボックスが消えると、ボトムボックスがそこに優雅に浮かぶようにするにはどうすればいいですか？私はそれを達成することができるjQueryの良い方法ですか？あなたがここにフィドルを見ることができます

：

簡単：http://jsfiddle.net/UBEmx/2/

Answer 1

確かに、主に二つの方法があり、上のボックスにslideUpアニメーションを使用し、どのようなその下のはそのを取るまでスライドするはずです場所。

$('#box-1').slideUp(); 

ハード：非表示のアニメーションは、私はちょうど代わりfadeToggleのslideToggleを使用する最初の

Answer 2

に完了した後、下のボックスのプロパティをアニメーション化するjQueryのanimationsを使用しています。このように、jQueryはほぼ同じままで、オン/オフのクリック機能を維持します。あなたがここにアクションでそれを見ることができます。

http://jsfiddle.net/UBEmx/1/

あなたはboxクラスにちょうどheightであなたのmin-heightを変更する場合は、より良いアニメーションを取得します。

CSS：

.box 
{ 
    background-image: url("/new/public_html/img/BlackFadedBG.png"); 
    border: 2px solid black; 
    max-height: 400px; 
    max-width: 600px; 
    height: 200px; /*here*/ 
    min-width: 300px; 
} 

のjavascript：

$("#click").click(function() { 
    $("#box-1").slideToggle(); 
});