Дивы "плавают" вокруг

Question

Извините за смутное название, я не могу придумать другого способа назвать его.

Если вы посмотрите на мою страницу и нажмете кнопку с надписью "привет", верхняя коробка исчезнет, ​​а нижняя займет ее место. Теперь, когда нижний блок движется вверх, он делает это мгновенно. Как я могу получить так, чтобы как только верхняя коробка исчезла, нижняя коробка "плавно" поднялась туда, изящно. Любой хороший способ с JQuery, что я мог бы сделать это?

Вы можете увидеть скрипку здесь: http://jsfiddle.net/UBEmx/2/

Answer 1

Конечно, есть два основных способа:

Easy : используйте анимацию slideUp в верхнем поле, и то, что находится под ним, должно сдвинуться вверх, чтобы занять его место.

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

hard : используйте анимацию jQuery , чтобы анимировать свойство в нижнем поле после завершения анимации скрытия в первом

Answer 2

Я бы просто использовал slideToggle вместо fadeToggle. Таким образом, ваш jQuery остается почти таким же, и вы сохраняете функцию включения / выключения. Вы можете увидеть это в действии здесь:

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

Если вы измените min-height в классе box на 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();  
});