jQuery UI Drop Effect

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

Syntax:

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

Parameters:

selectedEffect: Effect selected by the developer 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 and include relevant files for code implementation or use the paths for the scripts given 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 drop 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) { 
                $("#effect").effect(selectedEffect, 1200); 
            }; 
            $("#button").on("click", function () { 
                action("drop"); 
                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 Drop  
        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:

HTML

Contact Us