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

Question

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

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

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

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

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

但我无法弄清楚jquerymobile是如何做到这一点的，它工作得很好。

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

示例： http: //m.stanford.edu/ 这里当一个列表项被点击时，它会滑出而另一个滑入。

谢谢你。

Answer 1

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

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

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

按照这个优秀的教程，向您展示如何使用上述功能和 javascript 在任何移动设备中滑动全屏 div。

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