Skip to content
Related Articles

Related Articles

jQuery UI Bounce Effect
  • Last Updated : 18 Jan, 2021

In this article, we are going to show the effect of bounce using jQuery UI. All the content will show the bounce effect when the action button is clicked which actually triggers the bounce effect script.

Syntax :

$( ".selector" ).effect( 
    selectedEffect, options, time(in ms), callback 
);

Parameters:

  • selectedEffect: Select any effect given in jQuery UI.
  • options: Added for certain functionality (optional).
  • time:  The time to complete the effect in microseconds.
  • callback: Added for certain functionality (optional).

Return value: It does not return any value.

Scripts added: Please download the library to include relevant pre-compiled files or use the paths for the given scripts below.



<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>

<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>

<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: In this example, we are going to show the bounce effect using jQuery UI. We will trigger the script using a button.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script>
        $(function () {
            function action(selectedEffect) {
                $("#effect").effect(selectedEffect, 1200);
            };
            $("#button").on("click", function () {
                action("bounce");
                return false;
            });
        });
    </script>
  
    <style>
        .animation {
            width: 500px;
            height: 500px;
            position: absolute;
        }
  
        #button {
            padding: .5em 1em;
            text-decoration: none;
            position: absolute;
        }
  
        #effect {
            width: 250px;
            height: 190px;
            padding: 15px;
            position: relative;
        }
    </style>
</head>
  
<body>
    <h3>
        Geeks for Geeks Bounce 
        Effect Using jQuery UI
    </h3>
      
    <div class="animation">
        <div id="effect" class=
            "ui-widget-content ui-corner-all">
  
            <h3 class="ui-widget-header ui-corner-all"
                style="margin: 0; padding: 0.4em; 
                    height: 170px; text-align: center;
                    background-color: green;">
                Geeks For Geeks
            </h3>
        </div>
    </div>
      
    <span style="margin-left: 6em;">
        <button id="button" class=
            "ui-state-default ui-corner-all" 
            style="margin-top: 18em;">
            Action
        </button>
    </span>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :