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.

i found some code that usses css transitions and here is an example

the js

$('#signup').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

});

$('#create').on('click', function(e) {
    e.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip';
    document.getElementById( 'side-1' ).className = 'flip';

});

the issue with this example is that if i convert javascript into jquery it stopps working:

from:

 document.getElementById( 'side-2' ).className = 'flip flip-side-1';

to

$( '#side-2' ).addClass('flip flip-side-1');

Also im not sure if there isn't already a jquery plugin that does this in a better way.

Any ideas?

some more code. html

<div id="side-1" class="flip">
    <a id="signup" href="#">sign up</a>
</div>
<div id="side-2" class="flip">
    <a id="create" href="#">create</a>
</div>

css

.flip {
    backface-visibility:             hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;
        -o-backface-visibility:      hidden;
        -webkit-backface-visibility: hidden;
    border: 1px solid black;
    transform-origin:             50% 50% 0px;
        -moz-transform-origin:    50% 50% 0px;
        -ms-transform-origin:     50% 50% 0px;
        -o-transform-origin:      50% 50% 0px;
        -webkit-transform-origin: 50% 50% 0px;
    transition: all 1s;
        -moz-transition:    all 1s;
        -ms-transition:     all 1s;
        -o-transition:      all 1s;
        -webkit-transition: all 1s;
}

#side-1 {
    transform:             rotateY( 0deg );
        -moz-transform:    rotateY( 0deg );
        -ms-transform:     rotateY( 0deg );
        -o-transform:      rotateY( 0deg );
        -webkit-transform: rotateY( 0deg );
}

#side-2 {
    transform:             rotateY( 180deg );
        -moz-transform:    rotateY( 180deg );
        -ms-transform:     rotateY( 180deg );
        -o-transform:      rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
}

.flip-side-1 {    
    transform:             rotateY( 0deg ) !important;
        -moz-transform:    rotateY( 0deg ) !important;
        -ms-transform:     rotateY( 0deg ) !important;
        -o-transform:      rotateY( 0deg ) !important;
        -webkit-transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform:             rotateY( 180deg ) !important;
        -moz-transform:    rotateY( 180deg ) !important;
        -ms-transform:     rotateY( 180deg ) !important;
        -o-transform:      rotateY( 180deg ) !important;
        -webkit-transform: rotateY( 180deg ) !important;
}

​

Answer 1

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/

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

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