2

我有以下。这将为 div onClick 设置动画。我希望带有菜单列表和图像的 div 进入黄色 div 而不是进入空白区域。希望你明白。有没有办法做到这一点？这就是我所拥有的

        <div id="content">
          <div id="pageNav"  style="z-index:9999; position:relative;height:180px;">
            <button id="showmenu" type="button">Hide menu</button>
            <div class="sidebarmenu" style="position: absolute;">
               Menu List
               <img class="image" src="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg">
            </div>
         </div>
        </div>

CSS：

#showmenu {
background: #d2d2d2;
border-radius: 35px;
border: none;
height:30px;
width:140px;
font-weight:bold;
position:relative;
left:10px;
top:10px;
margin-bottom:15px;
}
#content{
background:yellow;
height:300px;
width:300px;
margin-left:30px;
}
.image{
height:90px;
width:90px;
}
.sidebarmenu{
background:pink;
height:150px;
width:150px;
text-color:white;
}

jQuery

            $(document).ready(function() {
               $('#showmenu').click(function() {
               var hidden = $('.sidebarmenu').data('hidden');
               $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
               if(hidden){
                   $('.sidebarmenu,.image').animate({
                   left: '0px'
               },500)
               } else {
                   $('.sidebarmenu,.image').animate({
                   left: '-210px'
               },500)
              }
              $('.sidebarmenu,.image').data("hidden", !hidden);

                });
            });
4

1 回答 1

6

将溢出隐藏添加到您的#content：

#content {
  background: yellow;
  height: 300px;
  width: 300px;
  margin-left: 30px;
  overflow: hidden;
}

更新小提琴

我们添加溢出隐藏的原因是，在我们当前的动画中，我们将它移动到左侧，使其超出包含元素的周边（#content 这里），当溢出没有设置为隐藏时，它的默认值为visible.

我建议阅读这篇文章以更好地了解绝对定位。

于 2013-09-20T10:39:00.910 回答