带有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。

我希望这有帮助