Size effect usign JQuery UI with speed, origin,scale , to and callback function

Syntax of Size effect using Jquery UI.


$( "#element" ).effect( "size",{to:object,origin:value,scale:value},speed,function(){

})

Here we have given "size " as effect. All other parameters are optional

origin: (Optional)

The end or vanishing point as array ['middle','center']

to: (Optional)

The height and width the size to reduce

scale: (Optional)

String value , 'both', 'box','content'. Default is 'both'. It is the box or the content inside, which is to be resized.

callback function: (Optional)

We can use a callback function to execute once the size effect is over

speed (Optional)

It can take these values

'fast'
'slow'
time in millseconds

Let us start with default size effect, d1 is id of our div layer.

$( "#d1" ).effect( "size" );

Usually it is connected to Click event of a button, here button id is b1

$('#b1').click(function(){
$( "#d1" ).effect( "size" );
})

We can add optional parameter to to manage height and width it resize to

$( "#d1" ).effect( "size",{height:100,width:300});

Similarly we can add scale to resixe the box or content inside the element. ( check the DEMO )

$( "#d1" ).effect( "size",{scale: 'content'});

WE can add callback function to this, the function will display an alert window with message once the size effect is over.

Here is the code with all optional values

	
$('#b1').click(function(){
$( "#d1" ).toggle( "size",5000,function(){
alert('This alert is created by using callback function once the toggle is over');
});
})

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Size effect using Jquery UI

Subscribe

1

2

3

4