Flip! your content with jQuery!

Flip! – A jQuery plugin that will flip easily your elements in four directions. 

Flip! your content with jQuery!

DEMO | DOWNLOAD

 

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',
	<strong>content:</strong>'this is my new content'
})

 

HOW TO ADD CALLBACKS?

There are three available callbacks: onBeforeonAnimationonEnd

$("#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

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

$("#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

DEPENDS ON:

  • jQuery (of course!) (tested on 1.3.2)
  • jQueryUI – core + effects core

COMPATIBILITY:

Flip is compatible with:
Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *