帶有jquery的動畫，動畫/切換

Question

我想通過onclick #header-connect-content-avatar來切換#header-connect-content-toggled ，我嘗試了兩種解決方案：

• 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。

問題是，內容被垂直修改，或者容器div不跟隨移動...

此動畫的正確方法是什么？

Answer 1

在這里查看小提琴http://jsfiddle.net/yinkadet/DRhw6/28/ ，我猜這就是您想要的。 第一種方法是更清潔的方法，我只添加了一個overflow-x：hidden，並使其不包裹在空白處，如下所示：

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

這樣，它可以正確滑動，而內容不會換成新的一行並擴展div。

我希望這有幫助