jQuery Forum

Is it possible to combine animate with scale somehow? The blue tab is longer than the white button, so I figure the only way to hide the blue under the white completely is to scale blue to 50% width as it slides back.
I'm open to other suggestions on how to achieve this. Thanks!

Current code: JSFiddle

HTML:

1. <div class="hide-mobile" id="button-top">
2.     <img src="http://i43.tinypic.com/dcajis.png" alt="" />
3.     <div class="slide innerTop"><p>HIDDEN SLIDING CONTENT</p></div>
4. </div>
5. <div class="hide-mobile" id="button-bottom">
6.     <img src="http://i43.tinypic.com/dcajis.png" alt="" />
7.     <div class="slide innerBottom"><p>HIDDEN SLIDING CONTENT</p></div>
8. </div>
   

CSS:

1. #button-top { width: 112px; height: 112px; position: absolute; left: 73%; top: 40px; padding-left: 100px; padding-right: 5px; overflow: hidden; z-index: 200; }
2. .slide { position: relative; height: 100px; overflow: hidden; width: 350px;}
3. .slide img {position: relative; z-index: 100;}
4. .slide p {width: 70px; padding:12px; color: #fff; margin: 0; }
5. .innerTop, .innerBottom { position: absolute; left: 110px; top: 0; width: 260px; height: 90px; margin: 12px; background: #0d90cd; overflow: hidden; z-index: -1;
   -webkit-border-radius:30px 0 0 30px;
      -moz-border-radius:30px 0 0 30px;
           border-radius:30px 0 0 30px; }
   
6. #button-bottom { width: 112px; height: 112px; position: absolute; left: 73%; top: 180px; padding-left: 100px; padding-right: 5px; overflow: hidden; z-index: 100;}
7. #button-top:hover, #button-bottom:hover {cursor: pointer;}
   

SCRIPT:

1. $('#button-top').toggle(function() {
2.   $('.innerTop').animate({'left':'3px'});
3. }, function() {
4.  $('.innerTop').animate({'left':'103px'});
5. });
   
6. $('#button-bottom').toggle(function() {
7.   $('.innerBottom').animate({'left':'3px'});
8. }, function() {
9.  $('.innerBottom').animate({'left':'103px'});
10. });