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 に答える