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

Question

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.

Solution

css

#layer{

    -webkit-transition-duration: 350ms;

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

    position: absolute;

}

jquery

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