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或它的包装。

编辑：基于评论

，这里是一个更新的小提琴：

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

一个包装用固定的大小和overflow:hidden增加。