Question

我希望切换一个显示：在另一个jquery动画之前使用jquery打开和关闭。我需要隐藏内容并从文档流程中撤回。这将解决我在另一个重叠的divs上遇到的另一个问题。我已经研究过使用绝对位置，但绝对会从文档的低位删除内容，导致整个布局崩溃和中断。

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

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

（容器div不在示例中。）

JS小提琴：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');
}

容器及其子女＆amp;页脚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

这是小提琴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

动画前Jquery切换显示？

1 个答案: