Jquery 在动画之前切换显示？

Question

我希望在另一个 jquery 动画之前使用 jquery 打开和关闭显示:无。我需要从文档流中隐藏和撤回内容。这将解决我一直遇到的另一个问题，即 div 相互重叠。我已经研究过为此使用绝对定位，但绝对定位会删除文档底部的内容，导致整个布局崩溃和中断。

我遇到的唯一可行的解​​决方案是从页面中删除所有 div 并根据需要插入它们。这将允许我在内容 div 和容器 div 之间保持父子链接。

我有一个简化的 JsFiddle，它显示了当前 Jquery 动画的基础知识。我需要堆叠所有面板，并允许容器 div(父级)拉动 Content div(子级)高度。

(容器div不在示例中。)

JS fiddle :http://jsfiddle.net/BeU3U/44/

    var settings = {
    objSlideTrigger: '.trigger', // link button id
    objSlidePanel: '' // slide div class or id
}

$(settings.objSlideTrigger).bind('click' , function() {

    if ( $('.panel').hasClass('out') )
        slidePanelIn();

    /**
     *  I use the $(this).data('content')
     *  that's defined within the HTML attribute
     *  to know which DIV Content to collect, e.g.
     *
     *  If I click: 
     *      <a class="trigger" data-content="panel-one">
     *  I'll be opening up:
     *      <div id="panel-one" class="panel">Panel One</div>
    **/
    settings.objSlidePanel = "#"+ $(this).data('content') +"";        

    //If the panel isn't out
    if(!$(settings.objSlidePanel).hasClass('out')) {
        slidePanelOut();
    } else if($(settings.objSlidePanel).hasClass('out')) {
        slidePanelIn();
    } 
});

function slidePanelOut() {
    //Animate it to left 
    $(settings.objSlidePanel).animate({
        'right' : '-67%'
    });
    //Add the out class
    $(settings.objSlidePanel).addClass('out');
}
function slidePanelIn() {
    //Otherwise, animate it back in
    $(settings.objSlidePanel).animate({
        'right' : '-89%'
    });
    //Remove the out class
    $(settings.objSlidePanel).removeClass('out');
}

容器及其子项和页脚 css。滑入的内容面板位于右侧面板中。

#container {
height: ;
overflow: hidden;
width: 100%;
position: relative;
height: auto;
z-index: 10;
}
#panel-left {
float: left;
width: 15%;
}
#panel-right {
float: right;
width: 85%;
}
#foot{
height: 100px;
background-color: yellow;
border-top: solid thin black;
width:100%;
z-index: 50;
}

提前致谢。

Answer 1

这是 fiddle http://jsfiddle.net/BeU3U/47/

<div class="container">
<div id="panel-one" class="panel">Panel One</div>
<div id="panel-two" class="panel">Panel Two</div>
<div id="panel-three" class="panel">Panel Three</div>
<div id="panel-four" class="panel"> Panel Four</div>
<div id="panel-five" class="panel">Panel Five</div>
</div>

CSS

.container { position: relative; }
.panel {
        width:85%;
        padding:2%;
        right:-89%;
        position: absolute;
        z-index:2;
        color: white;
        background: #2F2F2F ;
        -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        border-radius: 1% 1% 1% 1%;
        border-radius: 5px;
    }

   .trigger {
        width:10%;
        text-align:center;
        color:goldenrod;
        top:26px;
        padding:0.5% 0%;
        background:#2F2F2F ;
        right:30%;
        border-radius: 2px;
        padding: 5px;
    }enter code here