動畫兩個div左側

Question

我想要兩個div來左側動畫。

div1 - contains text - float left 
div2 - contains icons - float left 

一旦我點擊div1它應該左移圖標。

藍色方塊從右向左移動，但文字跟在我們的左側。 我想要的是跟着我們的文字應該在右側，一旦我點擊它，那麼它應該像藍框移動一樣左移。

HTML

<div id="footer"> 
    <div class="socialtext">Follow us</div> 
    <div class="socailicons"> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $('.socialtext').click(function() { 
     $('.socailicons').toggle("slide", { 
      direction: "right" 
     }, 1000); 
    }); 
}); 

CSS

#footer{ 
      width: 300px; 
      border: 1px solid #FF0000; 
      height: 35px; 
     } 
     .socialtext{ 
      width: 100px; 
      float:left; 
     } 
     .socailicons{ 
      width: auto; 
      display:none; 
      float:left; 
     } 
     .icon{ 
      width: 10px; 
      height: 10px; 
      background: none repeat scroll 0 0 #0769AD; 
      float:left; 
      margin: 10px; 
     } 

我希望 「關注我們」 的文字，在禁區右側，並且點擊時，它得到用圖標向左推。圖標最初會隱藏，點擊「關注我們」文字會顯示圖標。

Answer 1

甲div加入到包裹socialtext和socailicons，使得它們能夠容易地移動到一起。

HTML

<div id="footer"> 
    <div id="wrapper"> 
    <div class="socialtext">Follow us</div> 
    <div class="socailicons"> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
     <div class="icon">&nbsp;</div> 
    </div> 
    </div> 
</div> 

float: left;改變爲display: inline;，使得元件可以是更動態。

CSS

#footer { 
    width: 300px; 
    border: 1px solid #FF0000; 
    height: 35px; 
    overflow: hidden; /* hide the div that is out of the border */ 
} 
#wrapper { 
    position: relative; 
    right: -200px; /* move it to the right so that 
         .socialicons is out of the border */ 
} 
.socialtext { 
    width: 100px; 
    display: inline-block; 
} 
.socailicons { 
    display: inline; 
} 
.icon { 
    width: 10px; 
    height: 10px; 
    background: none repeat scroll 0 0 #0769AD; 
    display: inline-block; 
    margin: 10px; 
} 

使用.animate()，而不是移動它。

JS

$(document).ready(function() { 
    var isShown = false; 
    $('.socialtext').click(function() { 
     // toggle moving left and right 
     var offset = isShown? "-=200px": "+=200px"; 
     isShown = !isShown; 
     $('#wrapper').animate({"right": offset}, 1000); 
    }); 
});