divs가 "float"주위에 있습니다.

Question

막연한 제목을 쓰고 죄송합니다. 이름을 짓는 다른 방법을 찾아 내지 못합니다.

my page을보고 "hi"버튼을 클릭하면 상단 상자가 사라지고 하단 상자가 사라집니다. 이제 아래쪽 상자가 위쪽으로 이동하면 즉시 이동합니다. 어떻게하면 상위 상자가 사라지면 아래쪽 상자가 정상적으로 "플로트"되도록 할 수 있습니다. jQuery를 사용하면 좋은 결과를 얻을 수 있습니까?

당신은 여기에 바이올린 볼 수 있습니다

: 두 가지 방법 http://jsfiddle.net/UBEmx/2/

Answer 1

확실히있다을 :

쉬운 : 상단 상자에 slideUp 애니메이션을 사용하고 무엇은 받아까지 밀어한다 아래의 그 장소.

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

하드 : 숨기기 애니메이션이 처음

Answer 2

에 완료 한 후 난 그냥 fadeToggle 대신 slideToggle을 사용 아래 상자에 속성을 애니메이션하기 위해 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; 
} 

자바 스크립트 :

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