Question

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

Answer 1

你的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。

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

我认为这将有所帮助

Answer 2

您可以使用setTimeout：

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

Answer 3

您可以看到此http://jsfiddle.net/modaloda/F4nA9/1/

div {
    position: absolute;
    top: 0;
}

#fonctiondetails {
    z-index: 1;
}

Answer 4

我制作了自己的解决方案，我创建了一个像这样的容器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 */
   [...]
}

隐藏和显示相同级别的div

4 个答案: