CODEWITHSUNDEEP
jqueryhtmlcss
Anusha Honey
Anusha Honey

Reputation: 937

Animate div in another div

I have the following. This will animate the div onClick. I want the div with menu list and image to go into the yellow div instead of going into the white space. Hope you understood. Are there any ways to achieve this?? 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);

                });
            });

Upvotes: 2

Views: 153

Answers (1)

Patsy Issa
Patsy Issa

Reputation: 11303

Add overflow hidden to your #content :

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

Updated Fiddle

The reason we add overflow hidden is that in our current animation we're moving it to the left, making it go outside of the perimeter of the containing element (#content here), when overflow isn't set to hidden it's default value is visible.

I recommend reading this article to have a better understanding of absolute positioning.

Upvotes: 6

Related Questions