通过jQuery横向动画

Question

我有一些<div>元素和一个菜单，应该在点击时使用自定义动画“调用”这些不同的<div>。

这些是菜单：

• 正常
• 远程
• 工具
• 注册
• 登录
• 捐赠
• 联系
• 使用条款

现在我需要根据我点击的菜单项控制和显示不同的div。

我需要两次帮助：

1. 创建动画（参见下面的jsfiddle）
2. 在没有大量代码重写的情况下有效地处理div之间的转换。

场合1：

当我点击一个菜单（例如 Remote ）时，我希望其他可见菜单将自己移动到完整的右侧侧并消失（我使用过{在主要div上的{1}}然后从左侧侧进入正确的div（ remote-page div）。

所以基本上，我想让slideDown和slideUp水平。

这是我到目前为止所做的：http://jsfiddle.net/Dugi/UtH4m/8/

这是一个很好的例子，可以在本地显示我已经拥有的网站内容。当点击一个菜单按钮时，我没能从 LEFT 侧进入正确的div，我只能这样做，所以我可以隐藏站在上面的div方式。

最后一个问题：那么我如何使用 .animate（）从另一个可见的div向右移动后从左侧进入正确的div？

场合2：

正如您从上面的jsfiddle中看到的那样，我必须浏览每个现有的overflow: hidden并隐藏它们：

<div>

最后一个问题：有没有办法自动化这个过程并隐藏所有可见的div并在点击菜单按钮时显示正确的div？

这就是我想知道的。

由于

Answer 1

您可以使用animate函数的complete参数来实现此目的。如果你不介意的话，我冒昧地改变了HTML和CSS。 http://jsfiddle.net/UtH4m/9/

最终版本：http://jsfiddle.net/UtH4m/13/

Answer 2

我希望这就是你想要的。我改变了你的标记。我为所有移动的页面添加了#container。这就是它的样子：jsFiddle