jQuery UI Explode Effect Last Updated : 18 Jan, 2021 Comments Improve Suggest changes Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article jQuery UI Explode Effect J Jitender_1998 Follow Improve Article Tags : Web Technologies HTML JQuery jQuery-UI Similar Reads jQuery UI Fold Effect In this article, we are going to show the effect of fold using jQueryUI, all the content will roll up and go out when the action button is clicked which actually triggers the fold effect script. Syntax : $( ".selector" ).effect( selectedEffect, options, time(in ms), callback ); Parameters: selectedE 2 min read jQuery UI Fade Effect In this article, we are going to show the effect of fade using jQueryUI, all the content will fade out when the action button is clicked which actually triggers the fade effect script. Syntax: $( ".selector" ).effect( selectedEffect, options, time(in ms), callback ); Parameters: selectedEffect: Effe 2 min read How to use Explode effect in jQuery ? The Explode effect can be used with show/hide/toggle element. This explodes or implodes the element into/from many pieces. Syntax:selector.hide | show | toggle( "explode", {arguments}, speed );Parameters: pieces: It holds the number of pieces. The default pieces are 9. Mode: The mode of the animatio 1 min read jQuery UI Highlight Effect In this article, we are going to show the effect of highlight using jQueryUI, all the content will highlight with a small blink light when the action button is clicked which actually triggers the highlight effect script. Syntax : $( ".selector" ).effect( selectedEffect, options, time(in ms), callbac 2 min read jQuery UI Puff Effect In this article, we are going to show the effect of puff using jQueryUI, all the content will size out and then disappear when the action button is clicked which actually triggers the puff effect script. Syntax : $( ".selector" ).effect( selectedEffect, options, time(in ms), callback ); Parameters: 2 min read jQuery UI Clip Effect In this article, we are going to show the clip effect using jQuery UI. All the content will disappear from top and bottom at the same time when the action button is clicked which actually triggers the clip effect script. Syntax: $( ".selector" ).effect( selectedEffect, options, time(in ms), callback 2 min read 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: 2 min read jQuery UI Size Effect 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), callba 2 min read jQuery UI Shake Effect 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: selectedEf 2 min read 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: 2 min read Like