javascript - 通过 jQuery 横向动画

Question

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

这些是菜单:

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

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

我在两个场合需要帮助:

1. 创建动画(参见下面的 jsfiddle)
2. 无需大量代码重写即可高效处理 div 之间的转换。

情况 1:

当我点击菜单(例如远程)时，我希望其他可见菜单将自身移动到其完整的右侧并消失(我使用了 overflow: hidden在主 div 上)，然后从左侧 进入适当的 div(remote-page div)。

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

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

这是一个很好的例子，可以展示我在本地网站上已经拥有的内容。单击菜单按钮时，我未能使正确的 div 从 LEFT 侧进入，我只能做到这一点，以便我可以HIDE 站在方式。

最后一个问题: 那么，如何使用 .animate() 使正确的 div 在另一个可见的 div 移到右侧后从左侧进入？

场合 2:

正如您从上面的 jsfiddle 中看到的，我必须遍历每个现有的 <div> 并隐藏它们:

$('#remote').click(function()
{
      $('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
      $('#tools-page').animate({marginLeft: '100%'}, 'fast');  // here   
});

最后一个问题:有没有一种方法可以自动执行此过程并隐藏所有可见的 div 并在单击菜单按钮时显示正确的 div？

这就是我想知道的。

谢谢

Answer 1

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

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