jQuery UI API - Bounce Effect

Category

Effects

Usage

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

bounce

Parameters 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, half a bounce is added for the fade in/out effect. 5

Example

Use the Bounce Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>反弹特效（Bounce Effect）演示</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>点击任意地方进行切换。</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
});
</script>
 
</body>
</html>

Other Extensions