javascript - 使用 jquery 制作动画，动画/切换

Question

我想#header-connect-content-toggled用onclickon切换#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/，我猜这就是你想要的。第一种方法更简洁，我只是添加了一个溢出-x:hidden 并使其不在空白处换行，如下所示：

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

这样，它就可以正确滑动，而不会将内容分成新行并伸展您的 div。

我希望这有帮助