jQuery 和 Z-index 问题

Question

我正在创建一个简单的图片库。我的意思是简单:

 <div id="outerdiv" style="width:600px;height:400px; background:#ccc;padding:50px;">
  <div id="theGallery">
    <div class="thumbnailDiv" id="tn1">
      <div style="position: absolute;">
        <img id="1" src="pic1.jpg"/>
      </div>
    </div>
    <div class="galleryButtonLeft"></div>
  </div>
 </div>

我想向左滑动图像，以便在单击 galleryButtonLeft 时可以显示其他图像。这是我的 jQuery:

    $(function () {
    $(".galleryButtonLeft").mousedown(function (event) {
      event.preventDefault();
      $("#theGallery").animate({
      marginLeft: "-=300px"
       }, 1000);
      }).click(function (event) {
      event.preventDefault();
     });});

还有 CSS:

       .galleryButtonLeft
         {
        height:130px;
           width:40px;
         border:#996663 solid 1px;
         background:#e9cbad;
        z-index:30;
      }

画廊向左滑动，但它只隐藏在 galleryButtonleft div 后面，而不是在按钮左侧的 outerdiv div 部分后面。图库的 z-index 低于所有其他 z-indexes。那么我该如何隐藏 theGallery 使其不显示在 outerdiv div 上，除了 galleryButtonLeft 右侧的当前图像？

Answer 1

您可以在父容器上设置overflow: hidden。然后，当元素离开父元素的边界时，它将被隐藏。

此外，不要为整个画廊制作动画，只需为 img 或其包装器制作动画。

编辑:

根据评论，这是一个更新的 fiddle :

http://jsfiddle.net/6rHC2/3/

添加了固定大小和overflow:hidden 的包装器。