Effet d’agitation JQuery en cas d’erreur

J’essaie d’appliquer un effet de bougé sur ma page de connexion lorsqu’un utilisateur entre des informations incorrectes. À la minute, si un utilisateur envoie des détails incorrects, la page est actualisée, une notification PHP est imprimée et la division notification est rendue visible via JS. J’essaie d’utiliser la notification qui devient visible pour reconnaître que les informations sont incorrectes et pour basculer l’effet de bougé.

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?

les éléments suivants étant imprimés lorsque la page est rechargée

 Sign in unsuccessful. Try again?

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

Incluez-vous la bibliothèque de l’interface utilisateur jQuery?

Si la notification div n’existe pas initialement sur votre page, vous pouvez également mettre de l’ordre dans votre jQuery. Dans votre écho CSS ou PHP de la div, vous pouvez spécifier display: none; pour la notification div et utilisez ceci:

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

Essaye ça:

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

Puis le 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 }

Voici un exemple:

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

Ces événements se déclenchent simultanément. Vous voudrez peut-être que setTimeout () les déclenche dans un délai de 500 ms ou quelque chose comme ça Vous pouvez plus que probablement utiliser un rappel pour les renvoyer dans un ordre comme celui-ci:

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

Cela consiste à utiliser un chaînage et un rappel pour déclencher les événements dans un manoir plus contrôlant.