jQuery and Z-index issue

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;
      }

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

Answer 1

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

此外，不要对整个库设置动画，只对img或其包装器设置动画。

编辑：

根据评论，这里有一个更新的小提琴：

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

添加了一个具有固定大小和CCD_ 9的包装器。