我目前正在构建针对 iPad 优化的网站。当用户触摸适当的按钮时,我应该显示/隐藏一些文本 block 。文本在 < p> 标签内。我使用 jQuery 来切换文本的可见性:
$("my selector").toggle("fast");
但它真的很不稳定......是否有一些特定于 iOS 的方法来制作动画,也许是另一个框架或其他东西?
我不认为它应该那么慢...
最佳答案
有几个针对 iOS 的动画脚本,但最基本的是您应该使用 CSS 动画,更具体地说是触发 iOS 硬件的 translate3d
属性(用于定位)。
要切换不透明度,您可以使用常规的 -webkit-transition 和 toggleClass,f.ex:
p { -webkit-transition: opacity 0.2s linear; opacity:1 }
p.hide { opacity:0 }
然后:
$("my selector").toggleClass('hide');
我在这里为您做了一个简单的演示:http://jsfiddle.net/rQFZd/
您可以检测触摸设备并专门为支持(和偏好)它的设备提供 css 动画。
编辑:动画高度示例:http://jsfiddle.net/rQFZd/1/ .虽然我不确定 iOS 的性能,但我认为它应该比 jQuery 好。
您还可以添加另一个容器,然后使用 translate3d 重新定位元素而不是缩小它,这在 iOS 上肯定会更流畅。示例:http://jsfiddle.net/rQFZd/2/
关于javascript - iPad2 上的慢速 jQuery 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7559810/