在iPad2上缓慢的jQuery动画

Question

我目前正在构建iPad优化网站.当用户触摸适当的按钮时,我应该显示/隐藏一些文本块.文本在<p>标签内.我使用jQuery来切换文本的可见性:

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

但它真的很不稳定......是否有一些iOS特定的方式来做动画,可能是另一个框架或其他什么？

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

Answer 1

有几个针对iOS的动画脚本,但基本原则是你应该使用CSS动画,更具体地说translate3d是触发iOS硬件的属性(用于定位).

要切换不透明度,可以使用常规的-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/