jquery how to do a flip effect?

Question

i am trying to mimic an effect found usually on mobile devices where you have a panel and when u click a button it spins around and on the other side it has some other info.

Answer 1

http://lab.smashup.it/flip/ is the best I've found for this.

Answer 2

The upside of using CSS transforms is it will run faster and (once you don't need to put all the styles in five times) it will be very elegant. The downside is that it won't work on some browsers at all (i.e. older browsers with no CSS transform support).

Personally, I'd use CSS transforms. Your code will look better with age and on mobile not worse.

I'll take a wild guess that the reason your jQuery "translation" fails is that existing classes aren't being removed by the translated code, but they are by the pure JavaScript, so:

$('#side-2').removeClass().addClass(' ... ');

If you look at the jQuery options -- they hide the content of the div, then rotate a colored rectangle, then refill the div. The CSS method, when it works, actually works.

Answer 3

About the current code. The reason why it's not working the way you want it to simply because it's not using any animation when switching between classes. You can use jQuery UI for that.

Shown here: http://jqueryui.com/docs/switchClass/