What is jQuery UI Size Effect?

In this article, we will learn jQuery UI Size Effect,This free JQuery tutorial for complete beginners will help you learn JQuery from scratch.

jQuery UI Size Effect - ❤️JQuery Tutorials In 2024

In this article, we are going to show the effect of size using jQuery UI, all the content will size up and down as per the parameters given when the action button is clicked which actually triggers the size 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 and use the path 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 size 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 = { to: { width: 500, height: 200 } }; 
                      
                    $( "#effect" ).effect( selectedEffect, options, 1200); 
                }; 
                $( "#button" ).on( "click", function() { 
                    action("size"); 
                    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>Beginner for Beginner Size 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;"> 
                  Beginner For Beginner</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 :