JQuery震动对错误的影响

当用户输入错误信息时，我正在尝试将震动效果应用到我的登录页面。 此时，如果用户提交了错误的详细信息，则会刷新页面，并打印PHP通知，并通过JS显示通知div。 我正在尝试使用通知变得可见，因为识别出信息不正确并切换摇动效果。

HTML

 
 
 
 Sign into Agito by using the credentials you were sent via email. If you haven't signed up yet, click the link below. 
 
  
  
  
  Haven't signed up yet?  
  

页面重新加载时打印以下内容

 
Sign in unsuccessful. Try again? 

JS

 $('document').ready(function() { $('.notification').hide(); $('.notification').slideDown(); if ($('.notification').is(':visible')) { $('.form-container').effect( "shake" ); } }); 

Answer 1

你是否包括jQuery UI库？

如果您的页面上最初不存在通知div，您还可以使用jQuery整理一些内容。 在div的CSS或PHP echo中，您可以指定display：none; 对于通知div并使用此：

 $(document).ready(function() { if ($(".notification").length) { $(".notification").slideDown("fast",function() { $(".form-container").effect("shake"); }); } }); 

Answer 2

试试这个：

 function shakeElement(element){ element.addClass('shake'); setTimeout(function(){ element.removeClass('shake'); },2100); }; 

然后是CSS：

 @-webkit-keyframes spaceboots { 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } } .shake { display: inline-block; -webkit-animation-name: spaceboots; -webkit-animation-duration: 0.8s; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear } 

这是一个例子：

 if (!phone.length > 0) { shakeElement($signupPhoneInput); showAlert('error','Please enter your phone number.'); $signupPhoneInput.focus(); return false; } 

Answer 3

这些事件同时发射。 您可能希望setTimeout（）它们在500毫秒内触发或类似的东西。 您很可能可以使用回调来按照这样的顺序触发它们：

 $('.notification').hide(250, function(){ $('.notification').slideDown(250); $('.form-container').effect('shake'); }); 

这是使用链接和回调来触发更具控制力的庄园中的事件。