出错时摇一个登录表单
我已经使用ajax成功构建了一个登录表单，并希望在用户输入错误的详细信息时为表单添加一个摇动效果。 我有适当的function，但只需要构建jquery效果（注意我知道jquery UI，但不想使用它！我不想使用任何插件）
到目前为止我有：
function shakeForm() { var p = new Array(15, 30, 15, 0, -15, -30, -15, 0); p = p.concat(p.concat(p)); $('form').css('left',p); } 根据我的理解，我需要循环值数组，但我该怎么做？ 请注意，元素表单已经具有相对位置。 那么这只是将这些值作为随机序列中的左值运行的情况？
谢谢
何必？ 动画排队。 更多 – 相反left属性你可以使用margin-left阻止添加position属性:)
function shakeForm() { var l = 20; for( var i = 0; i <= 10; i++ ) { $( 'form' ).animate( { 'margin-left': '+=' + ( l = -l ) + 'px', 'margin-right': '-=' + l + 'px' }, 50); } }
最好使用CSS而不是JS。 CSS使用更少的资源（更快）并且更简单。 您可以在此处找到好的（以及“随时可用”）示例： https ： //daneden.me/animate/
我为此做了一个插件..检查它http://static.mbiosinformatica.com.br/jQuery/
它适用于IE（7,8,9），Chrome和Firefox。
并且，您可以应用回调函数，以显示错误消息..或其他任何内容。
$('#div').shake({ positions : { 'L' : 50 , 'R' : 50 } , // shake only left and right (U,L,R,D) rotate : false , // rotate div on shake .. true/false parent : false // shake parent div .. true/false }, function(){ /* do something */ });
在位置，你也可以发送数组，只是： positions: [ [ 'L', 50 ... ] ]这个值’ 50 ‘是它与原始位置的抖动距离..
要更改超时（延迟）和效果持续时间，您必须设置timeout: [you timeout .. / delay ]和效果时间.. interval: ...
mmm为什么使用原生js，如果jquery animate（）可用…你尝试重复这样：
var p = new Array(15, 30, 15, 0, -15, -30, -15, 0); function shakeForm(index) { if(typeof index === "undefined") index = 0; if(typeof p[index] === "undefined") return false; $("form").animate({ "left": p[index] }, function() { shakeForm(index + 1); }); }
对于那些顽固（像我）和讨厌图书馆的人…
var e = document.getElementById('dividname'); e.style.marginLeft='8px'; setTimeout(function(){e.style.marginLeft='0px';},100); setTimeout(function(){e.style.marginLeft='8px';},200); setTimeout(function(){e.style.marginLeft='0px';},300);
然后在你的CSS中：
.shakeClass{ transition: margin 100ms; }
循环使用jQuery.each抛出数组： http ： //jsfiddle.net/N8F7Z/1/
function shakeForm() { var p = "15 30 15 0 -15 -30 -15 0".split(" "); $.each(p, function(key, value) { var delay = 100; setTimeout(function() { $("form").css("left", value + "px"); }, delay*key); }); }
制作数组的一种简单方法是将字符串与每个空格分开：
var p = "15 30 15 0 -15 -30 -15 0".split(" ");
每一步之间的延迟：
var delay = 100;
使用setTimeout(function() {...}, theTimeBeforeFiring )
theTimeBeforeFiring = delay * key
key是数组中值的关键：
key = 0, 1, 2, 3
jquery动画默认排队，所以你只需要为数组的每个元素调用animate ：
function shakeForm() { var p = [15, 30, 15, 0, -15, -30, -15, 0]; var x = $('form').offset().left; var speed = 40; $.each(p, function() { $('form').animate({'left': x + this}, speed); }); }
示例： http ： //jsfiddle.net/3qdFL/
上面的示例更改了元素的原始位置。
function shakeForm() { var margin = 15; var speed = 50; var times = 5; for( var i = 0; i < times; i++ ){ $( "form" ).animate( { 'margin-left': "+=" + ( margin = -margin ) + 'px' }, speed); $( "form" ).animate( { 'margin-right': "+=" + ( margin = -margin ) + 'px' }, speed); $( "form" ).animate( { 'margin-right': "+=" + ( margin = -margin ) + 'px' }, speed); $( "form" ).animate( { 'margin-left': "+=" + ( margin = -margin ) + 'px' }, speed); } }
在这里演示http://jsfiddle.net/UW6tN/1/
为什么不使用css3动画？ 在我看来，不要过头了。 有这么多插件存在，因为很多重新发明轮…我搜索了相同的东西，得到20个论坛和jquery插件的结果（还有另一个脚本添加）..但我发现这个和它的工作原理很粗糙。
不是我的答案，但它纯粹的css3！
CSS动画类似Mac OS X 10.8无效密码“摇”？