Submit your widget

A jQuery plugin Flip 360 degrees

Created 9 years ago   Views 18597   downloads 2838    Author Luca Manno
A jQuery plugin Flip 360 degrees
View DemoDownload 14.8 KB
139
Share |

This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis.

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:

  • contentdefine the new content of the flipped box. It works with: html, text or a jQuery object ex:$("selector")
  • directionthe direction where to flip. Possible values: 'tb', 'bt', 'lr', 'rl' (default:'tb')
  • colorFlip element ending background color
  • speedSpeed of the two parts of the animation
  • onBeforeSynchronous function excuted before the animation starts
  • onAnimationSynchronous function excuted at half animation
  • onEndSynchronous function excuted after animation's end