jQuery animations not working on iPhone

Question

Hi everyone,

I'm using jQuery on a client's vCard site - http://chrismward.com/beta - to switch between pages.

It all works great on the computer, but when I try on my iPhone: no dice.

I'm using jQuery 4.0 and here is the only js file I'm using on the site (other than jQuery from the Google CDN) - http://chrismward.com/beta/resource/js/main.js

If anyone can help me, I'd greatly appreciate it.

Thanks, -Giles

Answer 1

Regular JavaScript animations (using setTimeout/setInterval) don't work very well in Mobile Safari; you need to use CSS Animations to get decent results. You might want to try creating an iPhone-optimised version of the site using jQTouch (which uses CSS animations).

Answer 2

They appear to work fine in the iPhone Simulator. Which means, if they are too slow on an iPhone, they are just too slow. Use CSS animations like Steve Harrison suggests. You probably want the -webkit-transition property. Here's an example you can try.