jquery - Div 在向左/向右过渡时越过其他 div

Question

我的 HTML 5 应用程序有问题。我想制作一个带有左/右过渡的滑动菜单(响应式)，其中第一个面板始终在右侧 100px 可见。

但是有个问题。第一<div>传原件<div> ...

HTML:

<div id="myContainer">
    <div class="animate1 animate1-nomove">
        <section class="myPanel panel-padding">new new new new new</section>
    </div>
    <div class="animate2 animate2-nomove">
        <section class="myPanel panel-padding" id="scrolling">original</section>
    </div>
</div>

CSS:

div#myContainer {
    position: absolute;
    top: 60px; right: 0; bottom: 60px; left: 0;
    /* need for sliding menu */
    overflow: hidden;
    border: 1px solid;
}

div.animate1 {
    height: 100%;
    width: 100%;
    background-color: #c00;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    -ms-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
    position: absolute;
}

div.animate2 {
    height: 100%;
    width: 100%;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    -ms-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
    position: absolute;
}


/* no move */
.animate1-nomove {left: -100%;}
.animate2-nomove {left: 0px;}

/* move */
.animate1-move {left: 0px; margin-right: 100px;}
.animate2-move {left: 100%; margin-left: -100px;}

我的 fiddle :http://jsfiddle.net/nKtC6/714/

Answer 1

这就是你想要做的吗？

http://jsfiddle.net/prollygeek/nKtC6/716/

div.animate1 {
  height: 100%;
  width: 100px;
  background-color: #c00;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
  -ms-transition: 2s ease-in-out;
  transition: 2s ease-in-out;
  position: absolute;
}