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!

jQuery provides a basic effect of sliding in and out. However, in other to create other form of effect we will have to apply animate function provided by jQuery. This tutorial will demonstrate of using animate function in jQuery to perform a shrink function at the center of an element  that you often see in Gallery and other types of plugin.

It is not difficult to create a method to demonstrate a shrink in and out effect with animate function. The concept used here is to opposite the natural direction of the sliding jQuery provides in order to zoom in the image shows below.

Yes! Its RAWR! cute ghost, i was lazy to find a proper picture so i just grab him down to play with.  Now, in order to shrink him properly, we will have to use the plugin i created just for him. I will also explain what does this simple plugin does. You can have a look at the demo below,

demo-rawrzoom

PS: There is another method which is  a bit more complex than this one which you can see from here

So, how does the plugin work? Simple! it's just pure animate function from jquery with css. Illustrator the code below.

$(selector).stop(true,false)
.animate({
height: options.zoomSize+'px',
width: options.zoomSize+'px',
marginTop: ((oriH-options.zoomSize)/2)+'px',
marginLeft: ((oriW-options.zoomSize)/2)+'px'
}, options.duration)

What it does here is to shrink it to the size you define and move opposite accordingly. Let's assume height: and width: move upwards and right respectively while it shrink. So marginTop: and marginLeft: will move downwards and left respectively so that our eyes will illustrate the shrink on the center of the box! hopes this help!

Usage

An example on how to use this plugin from the demo site. The parameter is optional.

$('#zoomMe').zoom(
{
zoomWidth: 10,
zoomHeight: 10,
duration: 3000
}
);

or

$('#zoomMe').zoom();

Parameter

The optional parameter for this plugin is as follow,

• zoomwidth: the width you wish it to be minimize default its 10
• zoomheight: the height you wish it to be minimize defaults its 10
• duration: time for zoom to be complete defaults its 5000

You can download the plugin from

• jqueryrawrzoom (2.67kb) v1.0 uncompressed.
• jqueryrawrzoomcompressed (2.42kb) v1.0 compressed.
  

Sliding upwards is easy enough but finding a solution to slide downward seems to be a problem that i encounter. Searching for open source plugin for reference just takes too much time to just find the plugin that perform a downwards slide. My best bet is just brainstorm an idea to make jQuery slide downward.  To my luck, i successfully make my element slide downwards without any big complicated code.  The idea was farely simple, in order to slide downwards, we have to force jQuery to act as if it is sliding downwards. Since jQuery slide element upwards in default, we have no way but to trick the user eyes to make our element pretend to slide downwards. In order to do that, we constantly force our element to move downward while jQuery slide it upwards. This way we get a downward slide from jQuery. Illustrate the following code,

$('div#menu li').each(function() {
oriH = $(this).height();
opac = $(this).css('opacity');
$(this).hover(
function(){
$('div#menu li').not(this).stop(true,false)
.animate({height: '1px', marginTop: oriH+'px'}, options.duration).fadeTo(1,0);
}
,
function(){
$('div#menu li').not(this).stop(true,false).fadeTo(1,opac)
.animate({height: oriH , marginTop: '0px'}, 1500);
});
});

The code above attach an event handler to each object list item in the menu. The event, hover, will slide down all other neighbor list item other than itself. Notice that the animate height is adjusted to height 1px so that elements that are being slide downward do not cause disorder among the list. While, the list items are being pushed upwards, at the same time, we push the margin downwards using the marginTop element.

The goal of this particular jQuery tutorial is to demonstrate how to create a plugin for jQuery. There are actually many ways of building jQuery plugin, but i will prefer this method where i can allow my users to specify some of the optional parameter that they may want to set. Enough of long talk of jQuery, here goes,

step 1

This is one of the default template of jQuery plugin.

(function($){
$.fn.myEffects= function() {

return this.each(function() {

});
};
})(jQuery);

I like this way of setting up my plugin so that i can use the $ sign for jQuery without conflicting with other library that also uses the same sign.

Step 2

Now, We have our jQuery plugin template what i want this plugin to have is the ability to allow other user to change the default options that i have set in the plugin so that it is flexible enough for my user to to change according to their need. We can do this by using jQuery extend method.

(function($){
$.fn.myEffects= function(options) {

var defaults = {
startOpacity: 1,
hoverOpacity: 0,
duration: 2000
};
var options = $.extend(defaults, options);

return this.each(function() {

});
};
})(jQuery);

This way we successfully added the ability for our users to change our plugin default settings.

Step 3

Once our jQuery plugin template has been created, we can add other function into this plugin. The this.each function is important because it will help to iterate all the element specific by the users. For example, if the plugin is being called $("div").myEffect(), all the element of div will be affected by the plugin myEffect. For example, my plugin is to fade all other element other than the element on hover. The plugin will look like this,

(function($){
$.fn.myEffects= function(options) {

var defaults = {
startOpacity: 1,
hoverOpacity: 0,
duration: 2000
};
var options = $.extend(defaults, options);
var selector = this;
return this.each(function() {
$(this).hover(

function(){
$(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);
$(selector).not(this).stop(true,true).animate({opacity: options.hoverOpacity}, options.duration);
}
,
function(){
$(selector).not(this).stop(true,true).animate({opacity: options.startOpacity}, options.duration);

});

});
};
})(jQuery);

In order to call this plugin, we specify the name of the plugin which is myEffects $(function(){ $('div#menu li').myEffects() ;});

The above declaration will attach an event hover to each menu li with the default settings. Users can change the effects by giving the parameter a object.

$(function(){
$('div#menu li').myEffects({startOpacity: 0.8, hoverOpacity: 0.1})
;});

Its really simple to create a plugin for yourself! Try it! If there is anything you do not understand on this tutorial, please feel free to post these question out! Hope this help! You can download the test files from test-files-for-plug-in-tutorial!