JavaScript Div'Bounce'/'Jiggle'

Question

我在Apple的me.com服务（登录页面，如果你的用户/通行证是错误的，我正在尝试复制的效果）以及WordPress的登录中注意到这种效果。

当您在Mac上输入错误的用户名和密码时，它基本上是效果的JavaScript实现。

有没有人知道这样的东西是通过开源还是通过jQuery插件实现的？

Answer 1

您可以使用jQuery UI 'shake' effect。

示例：http://jsbin.com/alozu4

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

Answer 2

更好：没有Javascript，只有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;
}

用

测试

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