Skip to content
Related Articles

Related Articles

Improve Article
jQuery UI Shake Effect
  • Last Updated : 25 Jan, 2021

In this article, we are going to show the effect of shake using jQuery UI, all the content will go to and from when the action button is clicked which actually triggers the shake effect script.

Syntax :

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

Parameters:

  • selectedEffect: Effect selected given in jQuery UI.
  • options: Added for certain functionality (optional)
  • time: Time to complete the effect in microseconds.
  • callback: Added for certain functionality (optional)

Return value: It will not return anything.

Scripts added : Please download the library for including pre-compiled files or use the paths for the given script 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 shake effect using jQueryUI. We will trigger the script using a button.

HTML




<!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="https://code.jquery.com/jquery-1.12.4.js">
        </script>
        <script 
            src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
        </script>
        <script>
            $( function() {
                function action(selectedEffect) {
                    $( "#effect" ).effect( selectedEffect, 1200);
                };
                $( "#button" ).on( "click", function() {
                    action("shake");
                    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 Shake 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>

Output :




My Personal Notes arrow_drop_up
Recommended Articles
Page :