Element.shake

Note: an updated demo is now availaible here



When I have some spare-time, I'm searching the web for simple but nice mootools scripts.

the blog of David walsh is one of my favorites, I wrapped his mootools skype effect in Element to make it easier to do.


view a demo

• /*


• based upon work from david walsh, http://davidwalsh.name/skype-mootools





• File:



• element.shake.js





• @author thierry bela





• (code)





• $(element).shake();





• (function () { $(element).shake('horizontal')}).delay(500)


• (end code)



• */




• Element.implement({shake: function () {





• var fx1, fx2, property = arguments[0] == 'horizontal' ? 'margin-left' : 'margin-top';





• if(!this.retrieve('shake:fx1')) {





• this.store('shake:fx2', new Fx.Tween(this, {duration: 100, link: "chain", onChainComplete:function() { this.store('running', false) }.bind(this) })).



• store('shake:fx1', new Fx.Tween(this, {duration: 200, link: "chain", onComplete:function() {



• fx2.start(property, -7).start(property, -4).start(property, -6).start(property, 0);



• }



• })



• );



• }


• fx2 = this.retrieve('shake:fx2'),



• fx1 = this.retrieve('shake:fx1');





• if(!this.retrieve('running')) {





• fx1.start(property, -10).start(property, -4);



• this.store('running', true);



• }





• return this;



• }


• });

view a demo