jQuery：如何获得DIV滑动屏幕和滑入另一个？

我已经构建了一个使用CSS @media查询缩小到适合移动设备的web应用程序。jQuery：如何获得DIV滑动屏幕和滑入另一个？

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

当页面加载，使用@media查询，其他人会通过display: none;

当点击一个按钮，我想让它显示和可见一个隐藏隐藏的，这是我目前已经完成。

但我想动画这个过程，我想在移动设备上顺利工作。

但我不知道如何jquerymobile已经这样做，这是完美的。

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

例子：http://m.stanford.edu/ 这里单击列表项时，滑落在另一个幻灯片

谢谢。

来源

2013-02-17 Phil

如果您同时加载两个DIV的内容，这相当简单。然后你可以有一个容器DIV，它具有'overflow：hidden'和'position：relative'属性。在这个容器里面，你会有一个“视口”DIV，它将拥有属性“position：absolute”。您将两个内容DIV放置在视口区域内，并且只要您想滑动到其他内容，只需在视口DIV上使用jQuery的'animate（）'方法即可。 – kjetilh 2013-02-17 14:52:40

Hi @kjetilh。谢谢你的评论，我很欣赏这个解释。但我不认为这会工作，因为.animate（）不是真正的硬件支持，而面板幻灯片的所有jquery移动动画由于加速平滑？ – Phil 2013-02-17 15:22:24

我不确定jQuery手机是如何做到的，但另一种可能是CSS3转换，它应该会产生更好的性能，但它们几乎不像jQuery效果（跨浏览器兼容）那样受到支持。不确定当你说'加速'时你指的是什么。 jQuery Mobile使用jQuery动画没有意义吗？：p – kjetilh 2013-02-17 15:32:45

主要功能，可以帮助你做使用HTML5/CSS/JavaScript的硬件加速动画是-webkit-transform: translate3d CSS规则转换幻灯片水平（x）的位置向左或向右：

translate3d （x，y，z），translateZ（z）

将元素移到x，y和z中，然后移动z中的元素。正z是朝向观众。与x和y不同，z值不能是百分比。

遵循这个出色的tutorial，它向您展示了如何在任何使用上述功能的移动设备上使用全屏滑动div来滑动javascript。

有关使用html5进行硬件加速的更多讨论，请参见this文章。

来源

2013-02-17 19:22:17 abbood

+1的教程和链接.. :) :) – bipen 2013-02-20 12:46:20

嘿谢谢人:) – abbood 2013-02-20 12:51:38

jQuery：如何获得DIV滑动屏幕和滑入另一个？

回答

相关问题