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/

如果您将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();  
});

让div“浮动”

2 个答案: