jquery - 在不超过宽度的情况下将一个 div 移动到另一个内部

Question

我将创建一个 js 效果，将 100% 的 div 向右移动，在 100% 的 div 内。

为了更好地解释:想象一个宽度为 1000 像素、高度为 500 像素的 div。在这个 div 中，我们有另一个大小相同的 div。但是，这应该向右滑动，以显示菜单。

这是我的 CSS 和 HTML 代码:

.mainview { width: 500px; height: 1000px; border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; background: #fff; -webkit-box-shadow: 0 0 8px 2px rgba(0,0,0,0.1); box-shadow: 0 0 8px 2px rgba(0,0,0,0.1);  border: 1px solid #ccc; margin: 20px auto;}


.foreground { display: block; position: relative; z-index: 990; width: 100%; height: 100vh; background: rgba(0,0,0,0.3); left:200px  }



<div class="mainview">

<div class="foreground">
this black area will slide to the right --->
</div><!-- @end of foreground  -->


</div><!-- @end of mainview -->

这里是 JsFiddle 文件 http://jsfiddle.net/ZTmFY/

在示例中，div 按我想要的方式向左移动，但超出了 div 的限制。我希望额外的宽度边保持隐藏，就像附加的示例一样

Answer 1

将类 mainview 的元素的 css 属性 overflow 设置为 hidden

DEMO