JavaScript Div 'Bounce' / 'Jiggle' [closed]

Question

I noticed this effect within both Apple's me.com service (the login page, if your user/pass is wrong it does the effect I'm trying to replicate) as well as within WordPress' login.

Its basically a JavaScript implementation of the effect when you type in the wrong username and password on a Mac.

Does anyone know if something like that has been implemented open source or via a jQuery plugin?

Answer 1

You could use the jQuery UI 'shake' effect.

Example: http://jsbin.com/alozu4

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

Answer 2

Even better: No Javascript, but only 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 it with

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