JavaScript Div "Bounce"/"Jiggle"

Question

Zauważyłem ten efekt w ramach serwisu me.com firmy Apple (strona logowania, jeśli twój użytkownik/hasło jest źle, robi efekt, który próbuję replikować), jak również w ramach WordPress "zaloguj się.

Jest to w zasadzie implementacja JavaScript efektu po wpisaniu nieprawidłowej nazwy użytkownika i hasła na komputerze Mac.

Czy ktoś wie, czy coś takiego zostało zaimplementowane przez open source lub przez wtyczkę jQuery?

Answer 1

Można użyć numeru jQuery UI 'shake' effect.

Przykład: http://jsbin.com/alozu4

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

Answer 2

Nawet lepiej: Nie Javascript, ale tylko 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; 
} 

przetestować go z

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