4

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

这些是菜单：

  • 普通的
  • 偏僻的
  • 工具
  • 登记
  • 登录
  • 捐
  • 接触
  • 使用条款

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

我在两种情况下需要帮助：

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

场合1：

当我单击一个菜单（例如远程）时，我希望另一个可见菜单将自己移动到其完整的右侧并消失（我已经overflow: hidden在主 div 上使用过），然后从左侧正确的 div 来在（远程页面div）。

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

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

这是一个很好的例子，可以展示我在本地为我的网站所拥有的东西。当单击菜单按钮时，我未能从左侧进入正确的 div ，我只是可以做到，这样我就可以隐藏正在路上的 div。

最后一个问题：那么我如何使用.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？

这就是我想知道的。

谢谢

4

2 回答 2

5

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

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

于 2012-12-23T12:58:12.117 回答
3

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

于 2012-12-23T13:52:16.697 回答