Jquery comment faire un effet de retournement ?

Question

Je cherche à imiter un effet que l'on trouve généralement sur les appareils mobiles où vous avez un panneau et lorsque vous cliquez sur un bouton, il tourne autour et de l'autre côté il y a d'autres informations.

J'ai trouvé du code qui utilise des transitions CSS et voici un exemple

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

});

Le problème avec cet exemple est que si je convertis JavaScript en jQuery ça ne fonctionne plus :

de :

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

à

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

Aussi je ne suis pas sûr s'il n'existe pas déjà un plugin jQuery qui le fait de manière plus efficace.

Des idées ?

encore du code. html

    s'inscrire

    créer

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/ est le meilleur que j'aie trouvé pour cela.

Answer 2

L'avantage d'utiliser les transformations CSS est qu'elles s'exécuteront plus rapidement et (une fois que vous n'aurez pas besoin de mettre tous les styles cinq fois) cela sera très élégant. L'inconvénient est qu'elles ne fonctionneront pas du tout sur certains navigateurs (c'est-à-dire les anciens navigateurs sans support des transformations CSS).

Personnellement, j'utiliserais les transformations CSS. Votre code aura meilleure allure avec le temps et sur mobile, pas pire.

Je vais faire une supposition sauvage que la raison pour laquelle votre "traduction" en jQuery échoue est que les classes existantes ne sont pas supprimées par le code traduit, mais elles le sont par le JavaScript pur, donc :

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

Si vous regardez les options jQuery -- elles masquent le contenu de la div, puis font tourner un rectangle coloré, puis remplissent à nouveau la div. La méthode CSS, lorsqu'elle fonctionne, fonctionne réellement.

Answer 3

A propos du code actuel. La raison pour laquelle il ne fonctionne pas comme vous le souhaitez est simplement qu'il n'utilise aucune animation lors du passage entre les classes. Vous pouvez utiliser jQuery UI pour cela.

Montré ici: http://jqueryui.com/docs/switchClass/