jQuery UI Explode Effect

Last Updated : 18 Jan, 2021

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

Syntax:

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

Parameters:

selectedEffect: Effect selected by 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.

Pre-compiled scripts: Please download the library for file inclusion or use the paths for code implementation.

<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 explode effect using jQuery UI.

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, 800); 
            }; 
            $("#button").on("click", function () { 
                action("explode"); 
                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 Explode  
        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> 