CODEWITHSUNDEEP
javascriptjqueryipadanimationsafari
xx77aBs
xx77aBs

Reputation: 4768

Slow jQuery animation on iPad2

I'm currently building iPad-optimised website. I have some chunks of text that I should show/hide when user touches appropriate button. The text is inside of < p> tag. I use jQuery for toggling the visibility of the text:

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

But it is really choppy ... Is there some iOS specific way to do the animation, maybe another framework or something else ?

I don't think it should be that slow ...

Upvotes: 2

Views: 4918

Answers (1)

David Hellsing
David Hellsing

Reputation: 108490

There are several animation scripts that targets iOS, but the basics are that you should use CSS animations instead, and more specifically the translate3d property (for positioning) that triggers the iOS hardware.

For toggling opacity, you can use a regular -webkit-transition and toggleClass, f.ex:

p { -webkit-transition: opacity 0.2s linear; opacity:1 }
p.hide { opacity:0 }

and then:

$("my selector").toggleClass('hide');

I made a simple demo for you here: http://jsfiddle.net/rQFZd/

You can detect touch devices and serve css animation specifically to those that supports (and prefers) it.

EDIT: example of animating height: http://jsfiddle.net/rQFZd/1/. I’m not sure about iOS performance though, but I think it should be better than jQuery.

You can also add another container and then use translate3d to reposition the element instead of shrinking it, that should most certainly be smoother on iOS. Example: http://jsfiddle.net/rQFZd/2/

Upvotes: 6

Related Questions