JavaScript Div 'Bounce'/'Jiggle'

Question

Ho notato questo effetto all'interno del servizio me.com di Apple (la pagina di accesso, se il tuo utente/pass è sbagliato fa l'effetto che sto cercando di replicare) e all'interno Login di WordPress.

Fondamentalmente un'implementazione JavaScript dell'effetto quando si digita il nome utente e la password errati su un Mac.

Qualcuno sa se qualcosa del genere è stato implementato open source o tramite un plugin jQuery?

Answer 1

È possibile utilizzare lo jQuery UI 'shake' effect.

Esempio: http://jsbin.com/alozu4

$('#theElement').effect('shake', 100); 

Answer 2

Ancora meglio: No Javascript, ma solo CSS3:

http://jsfiddle.net/fluidblue/dyc96/

@-webkit-keyframes wiggle 
{ 
    0% {-webkit-transform: rotateZ(2deg);} 
    50% {-webkit-transform: rotateZ(-2deg);} 
    100% {-webkit-transform: rotateZ(2deg);} 
} 
@-moz-keyframes wiggle 
{ 
    0% {-moz-transform: rotateZ(2deg);} 
    50% {-moz-transform: rotateZ(-2deg);} 
    100% {-moz-transform: rotateZ(2deg);} 
} 
@-o-keyframes wiggle 
{ 
    0% {-o-transform: rotateZ(2deg);} 
    50% {-o-transform: rotateZ(-2deg);} 
    100% {-o-transform: rotateZ(2deg);} 
} 
@keyframes wiggle 
{ 
    0% {transform: rotateZ(2deg);} 
    50% {transform: rotateZ(-2deg);} 
    100% {transform: rotateZ(2deg);} 
} 

.test { 
    -webkit-animation: wiggle 0.2s ease infinite; 
    -moz-animation: wiggle 0.2s ease infinite; 
    -o-animation: wiggle 0.2s ease infinite; 
    animation: wiggle 0.2s ease infinite; 
} 

test con

<div class="test" style="background-color: red;">Test</div>