jquery animate --> css -webkit-transform: translate3d

8
votes

I have an iPhone & Phonegap & JQtouch app.

Now I use:

$('someElement').animate(...);

in order to switch screens.

The problem is that the performances are quite bad.

I read that there is a much better way to do it with "css -webkit-transform: translate3d",

I need to create a simple JQuery function which gets the "div" of the new screen and then moves it from right to left in 350ms. When the animation is done, I also need to run some other JQuery function.

1
iphonecordova
Yes, using translate3d on iOS is actually hardware accelerated and thus performance will be better. What is your question tho? - Louis B.
I need a JQuery function that implement this solution - Shlomi Babluki
I'm sorry but I doubt someone will just write the entire function for you! You should try it yourself and post any specific question you have here! - Louis B.

1 Answers

6
votes

css

#layer{

    -webkit-transition-duration: 350ms;

    -webkit-transform: translate3d(0,600px,0);

    position: absolute;

}

jquery

$('#layer').css('-webkit-transform', 'translate3d(0,0,0)');