Jquery 在另一个div中设置div动画

我有以下几点。这将设置div onClick的动画。我希望带有菜单列表和图像的div进入黄色div，而不是进入空白。希望你能理解。有什么方法可以做到这一点吗

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

                });
            });

---

将溢出隐藏添加到您的

#内容中

：

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

更新

我们添加溢出隐藏的原因是，在当前动画中，我们将其向左移动，使其超出包含元素（此处为内容）的周界，当溢出未设置为隐藏时，其默认值为可见

---

我建议您阅读本文，以便更好地了解绝对定位。

@PatsyIssa了解了。这就是我删除评论的原因：-）你能解释一下为什么要在答案中添加溢出：隐藏吗？@AnushaHoney当然，我现在就把它添加到答案中。午餐在这里brb>@AnushaHoney实际上

溢出：隐藏

将隐藏从包含div溢出的内容。因此，在动画中，您的菜单在

#content

之外。当它被隐藏时，会产生进入

#content

div内部的错觉。但事实上，它是隐藏的。帕特西，我说得对吗Issa@AnushaHoney在答案中添加了解释。

            $(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);

                });
            });

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