jQuery

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!