Jquery: How to use the flip animation properly? JQTOUCH
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.
开发者_Go百科Code I am using to flip:
jQT.goTo($('#page' + currPage), 'flip');
Can anyone help?
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.
精彩评论