在iPad2上缓慢的jQuery动画

Question

我目前正在构建iPad优化网站。当用户触摸适当的按钮时，我应该显示/隐藏一些文本块。该文本在＆lt; p为H.标签。我使用jQuery来切换文本的可见性：

$("my selector").toggle("fast");

但它真的很不稳定......是否有一些iOS特定的方式来制作动画，可能是另一个框架或其他东西？

我认为不应该 慢......

Answer 1

有几个针对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/