Bounce effect usign JQuery UI with speed, times and callback function

Syntax of Bounce effect using Jquery UI.


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

})

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

Times: (Optional)

Number of times the element should bounce, default value is 5

distance: (Optional)

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

callback function: (Optional)

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

speed (Optional)

It can take these values

'fast'
'slow'
time in millseconds

direction (Optional)

It can take these values

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

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

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

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

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

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

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

Similarly we can add distance in pixels

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

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

Here is the code with all optional values

	
$('#b1').click(function(){
$( "#d1" ).effect( "bounce",{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

Bounce effect using Jquery UI

Subscribe

1

2

3

4