jquery cómo hacer un efecto de volteo?

Question

estoy tratando de imitar un efecto que se encuentra generalmente en los dispositivos móviles donde tiene un panel y cuando hace clic en un botón gira alrededor y en el otro lado tiene otra información.

me encontré con un código que Usses transiciones CSS y here is an example

los 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'; 

}); 

el problema con este ejemplo es que si puedo convertir Javascript en jQuery que Stopps de trabajo:

de:

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

a

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

Además, no estoy seguro de si todavía no hay un complemento de jquery que lo haga de una manera mejor.

¿Alguna idea?

un poco más código. 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

http://lab.smashup.it/flip/ es el mejor que he encontrado para esto.

Answer 2

Acerca del código actual. La razón por la que no está funcionando de la manera que desea simplemente porque no está utilizando ninguna animación al cambiar de una clase a otra. Puedes usar jQuery UI para eso.

se muestra aquí: http://jqueryui.com/docs/switchClass/

Answer 3

La ventaja de utilizar las transformaciones CSS es que funcionará más rápido y (una vez que no es necesario poner todos los estilos en cinco veces) va a ser muy elegante. La desventaja es que no funcionará en algunos navegadores (es decir, navegadores más antiguos sin soporte de transformación CSS).

Personalmente, utilizaría las transformaciones de CSS. Su código se verá mejor con la edad y en el móvil, no empeorará.

Voy a tomar una conjetura salvaje que la razón de su "traducción" jQuery no es que las clases existentes no están siendo eliminados por el código traducido, pero son por el JavaScript puro, por lo que:

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

Si mira las opciones de jQuery, ocultan el contenido del div, luego rotan un rectángulo de color y luego rellenan el div. El método CSS, cuando funciona, en realidad funciona.