我的jsp页面是这样的: 编辑:http://jsfiddle.net/F4nA9/
<div id="fonctiondetails">
[...]
<img onclick="showoption()" ... />
[...]
</div>
<div id="addqualite" style="display: none;">
[...]
</div>
我的jQuery函数隐藏并显示我的DIV
function showoption() {
$( "#fonctiondetails" ).hide('slide',1000);
$( "#addqualite" ).show('slide',1000);
}
问题在于,当我的第一个div消失时,第二个div来自底部然后上升并替换第一个div,但是我想让她显示与第一个div相同的级别并且来自左边或者第一个div的权利。
答案 0 :(得分:2)
你的div在设计中必须处于相同的位置/等级;
想一想:
<style>
#fonctiondetails{
position: absolute;
top:0;
left:0;
}
#addqualite{
position: absolute;
top:0;
left:0;
display:none;
}
</style>
在这种情况下,2个div在同一个地方,所以当第一个div消失时,将显示第二个div。而且它们没有运动效果,因为它们在同一个地方。
示例样式是为了显示div的位置。但是你必须根据你的模板/页面设计你的div。
尝试使用位置样式(绝对,相对,静态或固定)
我认为这将有所帮助
答案 1 :(得分:1)
您可以使用setTimeout:
setTimeout(function(){
$( "#addqualite" ).show('slide',1000);
},200);
答案 2 :(得分:1)
您可以看到此http://jsfiddle.net/modaloda/F4nA9/1/
div {
position: absolute;
top: 0;
}
#fonctiondetails {
z-index: 1;
}
答案 3 :(得分:0)
我制作了自己的解决方案,我创建了一个像这样的容器div:
<div id="animateslide">
<div id="fonctiondetails"> ... </div>
<div id="addqualite" > ... </div>
</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 */
[...]
}