This post was originally going to be a discussion of the various design patterns used when creating jQuery plugins but while making an example for that very post I got a bit too engrossed in what was only meant to be an example…

So, here is a new jQuery plugin, it’s called "Fly Off Page". It will take selected elements and make them fly (not literally) off the page in a random or pre-defined direction. Customizable options include duration (of the animation), direction, tween (extend animation) and ‘retainSpace’ which allows you to retain, disregard or animate-out the space that the specified element once took up.

Avaiable directions:

Available options:

Duration: The amount of time (in milliseconds) over which the animation will run. For example: $ ( elem ) . flyOffPage ( { duration : 400 // 400 milliseconds (0.4 seconds) } ) ;

Direction: The selected element will fly off the page in this direction. ‘top’, ‘right’, ‘btm’, ‘left’ ‘topLeft’, ‘topRight’, ‘btmLeft’, ‘btmRight’ ‘random’

Tween: You can add your own tweens to the animation. For example: $ ( elem ) . flyOffPage ( { tween : { opacity : 0 } } ) ;

retainSpace: This can be set to true/false or an object which will be ran as an animation on the placeholder. For example: $ ( elem ) . flyOffPage ( { retainSpace : { height : 0 , width : 0 } } ) ;

Download

Note: This is only version 0.1 – there are bound to be a couple of small issues so please let me know if you notice one and I’ll release a patch as soon as possible.

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!