jQuery UI Scale Effect

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

Syntax :

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

Parameter:

selectedEffect: Effect selected 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 scale effect using jQuery UI. 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) { 

                    var options = { percent: 75 }; 

                    $( "#effect" ).effect( selectedEffect, options, 1200); 

                }; 

                $( "#button" ).on( "click", function() { 

                    action("scale"); 

                    return false; 

                }); 

            } ); 

        </script> 

        <style> 

            .animation  

            { 

              width: 500px;  

              height: 500px; 

              position: absolute;  

            } 

            #button  

             {  

                padding: .5em 1em;  

                text-decoration: none; 

               position: absolute; 

             } 

            #effect 

             {  

               width: 250px;  

               height: 250px; 

               padding: 15px;  

               position: absolute; 

             } 

        </style> 

    </head> 

    <body> 

        <h3>Geeks for Geeks Scale 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 :

Article Tags :

HTML

JQuery

Web Technologies

jQuery-UI