jquery come fare un effetto di vibrazione?

Question

sto provando a simulare un effetto trovato di solito sui dispositivi mobili in cui si ha un pannello e quando si fa clic su un pulsante si gira intorno e sull'altro lato ha alcune altre informazioni.

Ho trovato un codice che Usses transizioni css e here is an example

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

}); 

il problema con questo esempio è che se converto JavaScript in jquery esso Stopps lavoro:

da:

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

a

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

Inoltre non sono sicuro che non ci sia già un plugin jQuery che lo faccia in un modo migliore.

Qualche idea?

altro codice. 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/ è il migliore che ho trovato per questo.

Answer 2

Informazioni sul codice corrente. Il motivo per cui non funziona nel modo in cui lo si desidera semplicemente perché non utilizza alcuna animazione quando si passa da una classe all'altra. Puoi usare l'interfaccia utente jQuery per questo.

illustrato di seguito: http://jqueryui.com/docs/switchClass/

Answer 3

Il vantaggio di usare i CSS trasforma è sarà correre più veloce e (una volta che non c'è bisogno di mettere tutti gli stili in cinque volte) sarà molto elegante. Il rovescio della medaglia è che non funzionerà su alcuni browser (cioè i browser più vecchi senza supporto per la trasformazione CSS).

Personalmente, userei le trasformazioni CSS. Il tuo codice sembrerà migliore con l'età e sul cellulare non peggiore.

mi prendo un ipotesi che la ragione per la vostra "traduzione" jQuery non è che le classi esistenti non vengono rimossi dal codice tradotto, ma sono dalla pura JavaScript, in modo da:

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

Se osservate le opzioni jQuery - nascondono il contenuto del div, quindi ruotano un rettangolo colorato, quindi riempiono il div. Il metodo CSS, quando funziona, in realtà funziona.