jQuery：如何让 DIV 滑出屏幕而另一个滑入？答案

【问题标题】：jQuery: How to get DIV to slide-off the screen and another to slide in?jQuery：如何让 DIV 滑出屏幕而另一个滑入？
【发布时间】：2013-02-02 01:15:35
【问题描述】：

我已经使用 CSS @media 查询构建了一个网络应用程序，该应用程序可以缩小到适合移动设备的版本。

我想要一个按钮来在显示 DIV 的两个主要内容之间切换。

当页面加载时，使用@media 查询，另一个通过display: none; 隐藏

当一个按钮被点击时，我希望它显示并隐藏可见的，我目前已经这样做了。

但我想为这个过程制作动画，我希望它能够在移动设备上顺利运行。

但我无法弄清楚 jquerymobile 是如何做到这一点的，但效果很好。

我需要做什么才能让一个面板 (div) 从左侧滑出，另一个从右侧滑入，就像使用非移动 jquery 的 mobilejquery 一样？

示例：http://m.stanford.edu/ 此处，当单击一个列表项时，它会滑出，而另一个会滑入。

谢谢。

【问题讨论】：

如果同时加载两个 DIV 的内容是相当容易的。然后，您可以拥有一个容器 DIV，它具有属性 overflow: hidden 和 position: relative。在此容器中，您将有一个“视口”DIV，它具有属性position: absolute。您可以将两个内容 DIV 放置在视口区域内，每当您想要滑动到其他内容时，只需在视口 DIV 上使用 jQuery 的 animate() 方法。
嗨@kjetilh。感谢您的评论，我非常感谢您的解释。但是我不认为这会起作用，因为 .animate() 并不是真正的硬件支持，而面板幻灯片的所有 jquery 移动动画由于加速而流畅？
我不确定 jQuery mobile 是如何做到的，但另一种可能性可能是 CSS3 过渡，它应该会产生更好的性能，但它们几乎不像 jQuery 效果那样受支持（跨浏览器兼容）。当您说“加速”时，不确定您指的是什么。 jQuery Mobile 使用 jQuery 动画没有意义吗？ :p
你好@kjetilh！显然 jQuery Mobile 使用不同类型的动画（更好的，基于 css 的版本），它们使用“硬件加速”，这反过来意味着像在台式机上一样流畅的动画。没有它，所有动画在移动设备上都显得非常缓慢、笨重和笨重。我认为@abbood 下面的建议很好，所以让我们好好阅读一下。 ;-)
对，很有趣。如果移动浏览器支持这一点，那就太好了，当我自己有时间的时候，我应该仔细看看transform CSS 属性。祝你好运:)

标签： jquery css jquery-mobile slide css-animations

【解决方案1】：

可以帮助您使用 HTML5/css/javascript 进行硬件加速动画的主要功能是 -webkit-transform: translate3d css 规则，该规则平移幻灯片的水平 (x) 位置到左侧或右侧：

translate3d(x, y, z), translateZ(z)

在 x、y 和 z 中移动元素，只在 z 中移动元素。正 z 朝向观察者。与 x 和 y 不同，z 值不能是百分比。

关注这个出色的tutorial，它将向您展示如何使用上述功能和 javascript 在任何移动设备中滑动全屏 div。

有关使用 html5 进行硬件加速的进一步讨论，请参阅this 文章。

【讨论】：