Element.shake()

Snippets are small pieces of code that do not fit in the UvumiTools plugin category. Please note that each of these semi-useful functions requires Mootools 1.2.

This is a small effect that graphically shakes an element, or maybe "vibrate" would discribe it better. Could be a fun way to bring user's attention to one element. Accepts two optional paramters, the shaking radius (default: 3) and the duration in milliseconds (default: 500). This script was originally very small, but to support various positioning, padding, and browsers (cough-IE-cough), it got a little hefty.

Element.implement({
shake : function(radius,duration){
radius = radius || 3;
duration = duration || 500;
duration = (duration/50).toInt() - 1;
var parent = this.getParent();
if(parent != $(document.body) && parent.getStyle('position')=='static'){
parent.setStyle('position','relative');
}
var position = this.getStyle('position');
if(position=='static'){
this.setStyle('position','relative');
position = 'relative';
}
if(Browser.Engine.trident){
parent.setStyle('height',parent.getStyle('height'));
}
var coords = this.getPosition(parent);
if(position == 'relative' && !Browser.Engine.presto){
coords.x -= parent.getStyle('paddingLeft').toInt();
coords.y -= parent.getStyle('paddingTop').toInt();
}
var morph = this.retrieve('morph');
if (morph){
morph.cancel();
var oldOptions = morph.options;
}
var morph = this.get('morph',{
duration:50,
link:'chain'
});
for(var i=0 ; i < duration ; i++){
morph.start({
top:coords.y+$random(-radius,radius),
left:coords.x+$random(-radius,radius)
});
}
morph.start({
top:coords.y,
left:coords.x
}).chain(function(){
if(oldOptions){
this.set('morph',oldOptions);
}
}.bind(this));
return this;
}
});

Usage:

$('myElement').shake();
$('myOtherElement').shake(5);         //Shakes the element on a radius of 5 pixels
$('anotherElement').shake(2,2000);    //Shakes the element on a radius of 2 pixels, for two seconds

Demo:

dummy