Agite las cosas usando el efecto Shake de jQuery UI -

Ayer creé un tutorial que muestra cómo puedesagitar un elemento usando Fx.Shake , un componente de MooTools escrito por Aaron Newton. Resulta que jQuery UI también tiene un efecto de vibración que puede llamar la atención sobre un elemento.

El XHTML

diva href="https://davidwalsh.name"img src="/demo/mootools-shake.png" alt="Blog de David Walsh" //a/div

Exactamente igual que mi método MooTools.

El CSS

#shaker{ posición: fija; arriba: 10px; derecha: 10px; ancho: 299px; altura: 253 px; pantalla: ninguna; }

También exactamente igual que mi método MooTools.

El JavaScript jQuery

función periódica() {$('#shaker').effect('shake', { veces:3 }, 200);}$(document).ready(function() {$('#shaker').hide( ).css('display','').fadeIn(600);var shake = setInterval(periodical, 5000);/* actualizado: haga clic en borrar */$('#shaker').click(function() {clearInterval (agitar);})});

El código es básicamente exactamente la misma lógica trasladada a la sintaxis y metodología de jQuery. Recuerde que necesita jQuery UI para hacer esto.

Lo que me encantó de crear estos tutoriales fue que son ejemplos perfectos de cuán flexibles son estas dos bibliotecas. Ambos me permitieron crear la misma funcionalidad en muy poco código. La gente no debería centrarse en “jQuery contra MooTools”, la gente debería centrarse en “jQuery o MooTools”.

Actualización: haga clic en Borrar

Agregué borrar el intervalo (y así detener el temblor) una vez que el usuario hizo clic en el elemento.