JavaScript Div'Bounce'/'Jiggle'

Question

我注意到Apple的me.com服务(登录页面,如果你的用户/传递错误,它正在尝试复制的效果)以及WordPress登录中的这种效果.

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

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

Answer 1

你可以使用jQuery UI'shake'效果.

示例: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>