Shake effect usign JQuery UI with direction,distance, times and callback function

Syntax of Shake effect using Jquery UI.


$( "#element" ).effect( "shake",{times:value,distance:value,direction:value},speed,function(){

})

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

Times: (Optional)

Number of times the element should shake, default value is 3

distance: (Optional)

Distance in pixel the element has to travel , default value is 20

direction (Optional)

It can take these values , default is 'left'. For the direction left and right the movement will be horizontal only but the first step of sake will change. Similarly for up direction the first step will go up in vertical movement. ( watch the DEMO )

'left'
'right'
'up'
'down'

callback function: (Optional)

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

speed (Optional)

It can take these values

'fast'
'slow'
time in millseconds

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

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

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

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

We can add optional parameter times to manage number of time the effect should happen.

$( "#d1" ).effect( "shake",{times:4});

Similarly we can add distance in pixels

$( "#d1" ).effect( "shake",{distance:200});

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

Here is the code with all optional values

	
$('#b1').click(function(){
$( "#d1" ).effect( "shake",{times:10,distance:200},5000,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

Shake effect using Jquery UI

Subscribe

1

2

3

4