Question

我有以下内容。这将动画div onClick。我希望div与菜单列表和图像进入黄色div而不是进入白色空间。希望你明白。有没有办法实现这个？ This is what I have

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

更新了 Fiddle

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

我建议您阅读此article以更好地了解绝对定位。

在另一个div中动画div

1 个答案: