Jquery: How to use the flip animation properly? JQTOUCH

Question

I am trying to create a little flip book. I have as many divs as there are pages. They are all set to display: none; Unless they have the current class attached.

I have one page showing, and the page that would go next to it showing just beside it. I want to take the page that is beside it, and make it flip onto the other page to get to the next div.

What I have right now is the single page will flip on top of itself instead of the page next to it. I have all of the variables set up properly and I have the proper divs that are supposed to show up when flipped showing when they should.

Code I am using to flip:

jQT.goTo($('#page' + currPage), 'flip');

Can anyone help?

Answer 1

It sounds like you want a modified flip animation. To do this, you'll need to create a custom animation as documented here.

To get some clues how to make the page-turn animation, it's probably a good idea to check out the "flip" animation in jqtouch.css, starting at the line ".flip {", ending just above this line: ".slideup.in {"

I haven't done this myself, but my guess is you'll want to (at least) play with translateY primitive of -webkit-transform property.

This demo may give you some idea on modifying the flip to achieve the effect you're after.