jQuery UI Bounce Effect
The jQuery UI bounce effect moves an element back and forth several times. It can also be used with show, hide and toggle operations.
This is a jQuery UI effect, so the page using it must load jQuery UI in addition to jQuery.
Syntax and Main Options Top ↑
The general form is $(selector).effect(effectName, options, duration, complete). The options available depend on the selected effect.
times: Number of bounces. The default is 5.distance: Largest bounce distance in pixels. The default is 20.duration: Animation duration in milliseconds or a named duration.complete: Function called after the effect completes.
Examples Top ↑
Basic syntax
$( "#element" ).effect( "bounce", { times: 4, distance: 40 }, 600, function () {
// Runs after the bounce completes.
});Default bounce
$( "#d1" ).effect( "bounce" );Run from a button
$( "#b1" ).on( "click", function () {
$( "#d1" ).effect( "bounce" );
});Change the number of bounces
$( "#d1" ).effect( "bounce", { times: 4 } );Change the bounce distance
$( "#d1" ).effect( "bounce", { distance: 200 } );Combine options with a callback
$( "#b1" ).on( "click", function () {
$( "#d1" ).effect( "bounce", { times: 10, distance: 200 }, 5000, function () {
alert( "The bounce effect has finished." );
});
});View demo of all jQuery UI effects →
When to Use This Effect Top ↑
Use this effect when the animation itself helps explain a state change or draws attention to an element. For routine interfaces, keep motion short and purposeful so it does not distract from the content.
← Previous effect · Next effect →
Back to jQuery Effects · jQuery Tutorials Home
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
