通过 jQuery 横向动画

Posted 2023-05-08

【中文标题】通过 jQuery 横向动画

【英文标题】：Animate sideways via jQuery

【发布时间】：2012-12-10 06:18:29

【问题描述】：

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

这些是菜单：

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

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

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

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

场合 1：

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

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

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

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

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

场合 2：

从上面的 jsfiddle 可以看出，我必须遍历每个现有的 <div> 并隐藏它们：

$('#remote').click(function()

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

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

这就是我想知道的全部。

谢谢

【参考方案1】：

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

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

【讨论】：

由于某种原因，我似乎无法让它在我的网站上运行，这与示例不同，我认为我使它们足够相似，但似乎我没有。我可以给你看看我网站的 HTML 吗？

确保只提供相关部分 =)

选择器必须更改为 "#inner > div" 以仅包含 #inner div 的第一级子项。 (jsfiddle.net/UtH4m/11)

现在可以了，谢谢。但正如我担心的那样，jQuery 中总是有一个副作用：从您提供的 jsfiddle 中，单击 Remote，然后单击 Normal，您可以看到 data-page="normal"不会向右滑动，它只是消失在原地。有任何解决这个问题的方法吗？我的网站上也发生了同样的事情，就像在小提琴中一样。

是的，只是一个小修复：当前页面应该只有在即将滑入时才可见。jsfiddle.net/UtH4m/12

【参考方案2】：

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