jQuery Conference 2012
Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Color Animation
Toggle Class
Add Class
Remove Class
Switch Class
Effect
Toggle
Hide
Show
Utilities
Position
Widget
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

UI/Effects/Bounce

Overview

Bounces the element multiple times, vertically or horizontally.

Dependencies

  • Effects Core

Example

Bounces 3 times when clicking on the element.

$("div").click(function () {
      $(this).effect("bounce", { times:3 }, 300);
});

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
</style>

  <script>
  $(document).ready(function() {
    
$("div").click(function () {
      $(this).effect("bounce", { times:3 }, 300);
});

  });
  </script>
</head>
<body style="font-size:62.5%;">
  <p></p><p></p><p></p><p></p><div></div>
</body>
</html>

Arguments

  • direction

    Type:
    String
    Default:
    "up"

    The direction of the effect. Can be "up", "down", "left", "right".

  • distance

    Type:
    Integer
    Default:
    20

    Distance to bounce.

  • mode

    Type:
    String
    Default:
    "effect"

    The mode of the effect. Can be "show", "hide" or "effect". .

  • times

    Type:
    Integer
    Default:
    5

    Times to bounce.