隐藏和显示相同级别的div

我有这样的jsp页面：编辑： http ： //jsfiddle.net/F4nA9/

 [...]  [...] 
 
 [...]  

我的jQuery函数隐藏和显示我的DIV

 function showoption() { $( "#fonctiondetails" ).hide('slide',1000); $( "#addqualite" ).show('slide',1000); } 

问题是，当我的第一个div消失时，第二个div来自底部并上升并替换第一个div，但是我希望她显示在与第一个div相同的级别中，并且来自左侧或右侧第一个div。

Answer 1

你可以看到这个http://jsfiddle.net/modaloda/F4nA9/1/

 div { position: absolute; top: 0; } #fonctiondetails { z-index: 1; } 

Answer 2

您的div必须在设计中处于相同的位置/级别;

认为：

在这种情况下，2个div在同一个地方，所以当第一个div消失时，将显示第二个div。 而且它们没有运动效果，因为它们在同一个地方。

示例样式是为了显示div的位置。 但是你必须根据你的模板/页面设计你的div。

尝试使用位置样式（绝对，相对，静态或固定）

我认为这将有所帮助

Answer 3

你可以使用setTimeout：

 setTimeout(function(){ $( "#addqualite" ).show('slide',1000); },200); 

Answer 4

我制作了自己的解决方案，我创建了一个像这样的容器div：

 
 
 ... 
 
 ... 
  

和css这样的文件：

 #animateslide { position: relative; [...] /* it's good to specify a height of your choice */ } #fonctiondetails { position: absolute; z-index: 1; [...] } #addqualite{ position: absolute; /* even if we did'nt specify position it's work */ [...] }