Search code examples
javascriptjqueryhtmlmobile-safarijqtouch

jQuery animations performance with Mobile Safari

I've just recently started developing a site for iPhone using jQTouch, and have the following code: 

<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" is hidden in the CSS and displayed when the user clicks the post title (I'm just working on a mockup, so the argument passed to showDesc() is hardcoded at the moment)

My problem is that when viewing it on the iPhone itself, the animation is incredibly slow and stuttery. It runs fine in desktop browsers (obviously!) and the iPhone simulator, it's just on the unit itself (running iOS 4.3.2).

My question is this: Is this an issue with my code or is it a case of jQuery not having been optimized for Mobile Safari?

I'm using jQTouch for the mobile framework, but the documentation only discusses page transitions by way of animation, so I'm not sure if there's a way of doing it with that.

Alternatively, would this task be better suited to CSS3 animation?

Thanks in advance!

Solution

  • Yes, it is highly recomended to use CSS3 transitions. They are hardware accelerated, whereas Javascript animations are not. You would want to transition opacity as well as width/height parameters for the slideToggle animation. It's nasty, but it gives you great performance