动画与jquery，动画/切换

Question

我想在#header-connect-content-toggled上使用onclick切换#header-connect-content-avatar，我尝试了两种解决方案：

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

我希望这会有所帮助