JQuery FlipBox

This plugin is used to flip the elements easily in four directions, top, bottom, left and right. You have to just a small code as in all the plugins and also you could add callbacks.


HOW TO USE?
Like every jquery plugin, just chain it:

$("#flipbox").flip({
direction:'tb'
})

HOW TO CHANGE CONTENT?

Add content params in this way:

$("#flipbox").flip({
direction:'tb',
content:'this is my new content'
})

HOW TO ADD CALLBACKS?

There are three available callbacks: onBefore, onAnimation, onEnd

$("#flipbox").flip({
direction:'tb',
onBefore: function(){
console.log('before starting the animation');
},
onAnimation: function(){
console.log('in the middle of the animation');
},
onEnd: function(){
console.log('when the animation has already ended');
}
})

HOW TO REVERT A FLIP?

There's an "hidden" method called revertFlip: as it says, revert a flip to the previous state

$("#flipbox").revertFlip()

ALL OPTIONS

Here are all options available:

content: define the new content of the flipped box. It works with: html, text or a jQuery object ex:$("selector")

direction: the direction where to flip. Possible values: 'tb', 'bt', 'lr', 'rl' (default:'tb')

color: Flip element ending background color

speed: Speed of the two parts of the animation

onBefore: Synchronous function excuted before the animation starts

onAnimation: Synchronous function excuted at half animation

onEnd: Synchronous function excuted after animation's end

Download URL: https://www.dropbox.com/s/kkpf1ofs43qwk1g/roncioso-Flip-jQuery-5f5d9a4.tar.gz