jQuery UI API - Bounce Effect

Usage

Description: The Bounce Effect bounces an element. When used with hide or show, the last or first bounce includes a fade-in/fade-out effect.

Parameter	Type	Description	Default Value
distance	Number	The maximum bounce distance in pixels.	20
times	Integer	The number of times the element bounces. When hiding or showing, an additional half bounce is added for the fade-in/fade-out effect.	5

Example

Using the Bounce Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bounce Effect Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<p>Click anywhere to toggle.</p>
<div id="toggle"></div>

<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});
</script>

</body>
</html>

View Demo

❮ Api Drop Effect Example Show ❯

jQuery UI API - Bounce Effect

Category

Usage

Example