- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
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 −
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.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 −
jquery-effects.htm
Advertisements
To Continue Learning Please Login
Login with Google