Tutorial: How to Create your own jQuery Flip effect plugin

It is always annoying to look at codes that are created in a plugin or website  that perform millions of complicated actions without comments to find the one effects contain in the plugin.

In this tutorial, i will demonstrate an easy to create  jQuery flip effect with minimum amount of complication so that you will be able to inherit this effect into your plugin.

Before we start, i believe the below resources will be useful to create your own simple flip effect program plugin

• How to Plugin tutorial with jQuery
  
• How to Slide downward with jQuery
  and its concept
• How to shrink/zoom center of a container with jQuery
  

Once you read the above tutorial, you should have an idea how jQuery flip actual work. The key point to flip is speed. And in order to create a jQuery flip effect plugin, we will apply the same concept on all other types of effect that is being used in other tutorial. Of course, the demo guy will be the ghost again. Opps. You can view the demo page below,

demo-rawrflip

Explanation

In order for the flip to work. There must be a swap between two images or containers. If there is only one element, we don't really need the flip effect on it.  The code for the demo above can be seen via view source or the one that i'm going to show below,

$(function(){

var alt = 0;
$('#flipMe').click(function(){
alt%2 == 0?
$(this)
.css('background-color', '#000')
.animate({height:50+'px', width: 0+'px', marginLeft: 25+'px'},140)
.css('background-color', '#555')
.animate({height:50+'px', width: 50+'px', marginLeft: 0+'px'},240):
$(this)
.css('background-color', '#555')
.animate({height:50+'px', width: 0+'px', marginLeft: 25+'px'},140)
.css('background-color', '#000')
.animate({height:50+'px', width: 50+'px', marginLeft: 0+'px'},240);
alt++;
})
});

i attached an event click to the image tag so that whenever user click on the image it will flip. There is a bit of maths in here so that we can determine user click by using modulus. The important part for flipping to occurs is shown below,

.animate({height:50+'px', width: 0+'px', marginLeft: 25+'px'},140)

whereby it compress the image at the center and flip it out from the center again which creates a flip effect when its quick enough. If the speed of the animate function is set to a larger value such as 2000, you will notice the flip effect became a zoom effect instead. Throw this into a plugin code and you get yourself a very simple jQuery flip effect plugin!