UI Fold effect usign JQuery with speed, HorizFirst and Size of the folded part with optional callback function

Fold effect using Jquery UI

Syntax of Fold effect using Jquery UI.


$( "#element" ).effect( "fold",{horizFirst: false/true,size: integer/string},speed,function(){

})

"fold" as effect. All other parameters are optional

speed (Optional)

It can take these values

'fast'
'slow'
time in millseconds

horizFirst (Optional)

Boolean (true or false). First horizontally to be folded while hiding. Default value is false

size (Optional)

Integer or string. This is the size of the folded element, default value is 15

callback function: (Optional)

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

Default fold effect, here d1 is id of our div layer.

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

Let's keep this inside a Click event of a button, here button id is b1

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

Adding callback Function:
We can display an alert window with message once the fold effect is over.

Here is the code

	
$('#b1').click(function(){
$( "#d1" ).effect( "fold",7000,function(){
alert('This alert is created by using callback function once the effect 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

Fold effect using Jquery UI

Subscribe

1

2

3

4