jQuery Effect - Bounce Effect
Description
The Bounce effect can be used with effect() method. This bounces the element multiple times, vertically or horizontally.
Syntax
Here is the simple syntax to use this effect −
selector.effect( "bounce", {arguments}, speed );
Parameters
Here is the description of all the arguments −
direction − The direction of the effect. Can be "up", "down", "left", "right". Default is "up".
distance − Distance to bounce. Default is 20
mode: The mode of the effect. Can be "show", "hide" or "effect". Default is "effect".
times − Times to bounce. Default is 5.
Example
Following is a simple example a simple showing the usage of this effect −
Live Demo<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("#button").click(function(){ $(".target").effect( "bounce", {times:3}, 300 ); }); }); </script> <style> p {background-color:#bca; width:200px; border:1px solid green;} div{ width:100px; height:100px; background:red;} </style> </head> <body> <p>Click the button</p> <button id = "button"> Bounce </button> <div class = "target"> </div> </body> </html>
This will produce following result −