在另一个div中动画div

Question

我有以下内容.这将动画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);

                });
            });

Answer 1

添加隐藏的溢出到您的#content:

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

更新小提琴

我们添加隐藏溢出的原因是,在我们当前的动画中,我们将它移动到左边,使其超出包含元素的边界(此处为#content),当溢出未设置为隐藏时,它的默认值为visible.

我建议阅读这篇文章,以便更好地理解绝对定位.