当滑动另一个div时，推出当前div

Question

目前我已经建立了一个基本模板，可以让我切换滑动4个不同的div到一个框架中。

这里是网站-请尝试点击眼睛、鼻子或额头。

正如您所看到的，一个div会滑入框架中，但是，

现在我想添加功能，在其中一个div滑入时将中心div滑出（因此如果顶部div滑入，则屏幕上的div将向下滑动，如果左侧div滑入，则屏幕将向右滑动等）。

有什么办法能实现这一点吗？我认为它会在过渡背景中产生很好的效果。

谢谢大家

katie

- katie bekell

---

请问您能否将您的代码放入Fiddler中吗？谢谢。 - Deadlykipper

@victorkilo，通过“center div”我指的是包含整个界面的div。 - katie bekell

我从未制作过JSFiddle，但这是我的尝试 - 由于某种原因，它无法正常运行。http://jsfiddle.net/EuCEG/ - katie bekell

@katiebekell - 我知道该怎么做才能让它工作，不幸的是我现在正在工作。如果今晚不太晚的话，我可以编写代码。 - VictorKilo

@victorkilo 这还不算太晚，我真的非常感谢你的帮助。 - katie bekell

Answer 1

你需要做的是将内容div绝对定位在一个固定的中心div内。这样可以让你相对于页面中心移动你的内容div。我使用CSS过渡来应用滑动效果。所以滑动效果只适用于现代浏览器，但它也能很好地降级至过时的IE浏览器。 这是一个带有工作演示的fiddle链接: http://jsfiddle.net/WVPDH/263/ 你显然需要对代码进行修改才能让它适应你的页面，但这不难做到。

如果fiddle链接失效了，我在下面发布了代码：

HTML：

<div id="fullContainer">
    <div id="right">

    </div>
    <div id="left">

    </div>
    <div id="top">

    </div>
    <div id="bottom">

    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            This is where your face should go.  Notice that I placed it within a centering div.  
            This will enable the face to be absolutely positioned, and allow for you to modify 
            it's position when the side-bars slide in.
            <div data-move="left">Open Left</div>
            <div data-move="right">Open Right</div>
            <div data-move="top">Open Top</div>
            <div data-move="bottom">Open Bottom</div>
        </div>
    </div>
</div>

CSS：

#centerContainer {
    position:fixed;
    top:50%;
    left:50%;
    width:0;
    height:0;
}
#relativeContainer {
    position:relative;
}
#fullContainer {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#content {
    position:absolute;
    width:300px;
    height:400px;
    top:-200px;
    left:-150px;
    background:#BADA55;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#content.right {
    left:-250px;
}
#content.left {
    left:-50px;
}
#content.bottom {
    top:-300px;
}
#content.top {
    top:-100px;
}

#content div {
    cursor:pointer;
    color:blue;
    text-decoration:underline;
    margin-top:15px;
    text-align:center;
}
#left {
    position:absolute;
    top:0;
    left:-125px;
    height:100%;
    width:100px;
    background:blue;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#left.opened {
    left:0;
}

#right {
    position:absolute;
    top:0;
    right:-125px;
    height:100%;
    width:100px;
    background:green;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#right.opened {
    right:0;
}

#top {
    position:absolute;
    left:0;
    top:-125px;
    width:100%;
    height:100px;
    background:yellow;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#top.opened {
    top:0;
}

#bottom {
    position:absolute;
    left:0;
    bottom:-125px;
    width:100%;
    height:100px;
    background:red;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#bottom.opened {
    bottom:0;
}

JS：

function SlideOut(element){

    $(".opened").removeClass("opened");
    $("#"+element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function(){

    var move = $(this).data('move');

    SlideOut(move);

});
​

- VictorKilo

---

太棒了！我一定想看到最终成品 :) - VictorKilo