動畫與jquery，動畫/切換

Question

我想切換#header-connect-content-toggled與#header-connect-content-avatar一個onclick，我試圖兩種解決方案：

• 1：http://jsfiddle.net/DRhw6/19/

  $("#header-connect-content-avatar").click(function() { 
      $("#header-connect-content-toggled").animate({width:'toggle'},2000); 
  }); 
  

• 2：http://jsfiddle.net/DRhw6/20/

  $("#header-connect-content-avatar").click(function() { 
      $("#header-connect-content-toggled").toggle("slide", { direction: "right" }, 2000); 
  }); 
  

我有一個修復內容的div和另一個div與寬度變量。

問題是，內容verticaly修改或div容器不符合運動...

什麼是這個動畫的正確方法？

Answer 1

看到這裏的小提琴http://jsfiddle.net/yinkadet/DRhw6/28/，我猜這就是你想要的。第一種方法是清潔的，我只是說溢出-X：隱藏，並使其在空格不換如下：

<div id="header-connect-content-toggled" style="float: left; background-color: #800000; overflow:hidden; white-space:nowrap;"> 

這樣一來，它的幻燈片權利，沒有內容闖入新線同時伸出你的div 。

我希望這可以幫助