我希望在另一个 jquery 动画之前使用 jquery 打开和关闭显示:无。我需要将内容隐藏并从文档流中撤出。这将解决我在彼此重叠的 div 上遇到的另一个问题。我已经研究过为此使用绝对定位,但绝对会从文档的底部删除内容,导致整个布局崩溃和中断。
我遇到的唯一我认为可行的解决方案是从页面中删除所有 div 并根据需要插入它们。这将允许我在内容 div 和容器 div 之间保持父子链接。
我有一个简化的 JsFiddle,它显示了当前 Jquery 动画的基础知识。我需要将所有面板堆叠起来,并允许容器 div(父级)拉出 Content div(子级)的高度。
(容器 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');
}
容器它的孩子和页脚 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;
}
提前致谢。