divs“浮动”在

Question

对不起，模糊的标题，我真的不知道另一种方式来命名它。

如果你看看my page，然后点击“hi”按钮，它会使顶部框消失，底部框代替它。现在，当底部盒子向上移动时，它瞬间完成。我怎样才能得到它，以便一旦顶盒消失，底部的盒子就会“优雅地”漂浮在那里。任何使用jQuery的好方法，我可以完成它？

这里你可以看到一个小提琴：http://jsfiddle.net/UBEmx/2/

Answer 1

肯定，主要有两种方式：

易：使用上部箱slideUp动画，什么是下应该向上滑动，以利用其地点。

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

硬：使用jQuery的animations对下面的框中动画属性隐藏动画第一

Answer 2

完成后，我只想用一个slideToggle代替fadeToggle的。这样你的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(); 
});