Question

我刚刚开始使用jQTouch为iPhone开发网站，并提供以下代码：

<li class="title" onclick="showDesc('desc1');">Post Title</li>
   <li id="desc1" class="shortDesc">
      Short description of post content
      <a href="#viewPost">Read</a> 
   </li>

<script type="text/css>
function showDesc(id){
    $("#"+id).slideToggle();
}
</script>

“desc1”隐藏在CSS中并在用户点击帖子标题时显示（我只是在处理一个模型，所以传递给showDesc（）的参数目前是硬编码的）

我的问题是，当在iPhone上观看它时，动画非常缓慢而且很烦人。它在桌面浏览器（显然！）和iPhone模拟器中运行良好，它只是在单元本身（运行iOS 4.3.2）。

我的问题是：这是我的代码的问题还是jQuery没有针对Mobile Safari进行优化？

我正在使用jQTouch作为移动框架，但是文档只讨论了动画的页面转换，所以我不确定是否有办法用它来做。

或者，这项任务是否更适合CSS3动画？

提前致谢！

Answer 1

是的，我们强烈建议使用CSS3过渡。它们是硬件加速的，而Javascript动画则不是。您可能希望转换slideToggle动画的不透明度以及宽度/高度参数。它很讨厌，但它给你带来了很好的表现

Answer 2

您应该在移动设备上使用CSS3动画，因为“CSS渲染引擎”有更多优化性能的机会。特别是转换变换（不会导致重新布局和重新渲染纹理的东西） - 它们很好地映射到硬件上。

Answer 3

事实证明，手机本身的很多渲染问题都是由应用于隐藏＆lt; li＆gt;的webkit-box-shadow属性引起的。

尽管CSS3对于此任务来说是一个更“原生”的选项，但jQuery slideToggle（）函数似乎运行得非常好。

我真的应该给出更详细的CSS概述，但现在已经根据你的推荐了解了更多关于CSS3动画的知识，所以值得！

使用Mobile Safari进行jQuery动画演出

3 个答案: