隐藏和显示相同级别的div

时间:2014-01-21 10:10:46

标签: javascript jquery

我的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的权利。

4 个答案:

答案 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 */
   [...]
}