Tutorial: jQuery effect – how to shrink/zoom at the center of a container

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.