How to use Explode effect in jQuery ? Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 animation. The number of pieces to explode should be a perfect square, any other values are rounded to the nearest square. Example: Hide and Show Div using button with Explode Effect. html <!DOCTYPE HTML> <html> <head> <title>Explode Example</title> <script type = "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("#hide").click(function(){ $(".target").hide( "explode", {pieces: 9 }, 2000 ); }); $("#show").click(function(){ $(".target").show( "explode", {pieces: 9}, 2000 ); }); }); </script> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksforGeeks </h1> <p style = "font-size: 20px; font-weight: bold;"> Click on any of the buttons </p> <button id = "hide"> Hide </button> <button id = "show"> Show</button> <br><br> <div class = "target" style="width:100px;height:100px; background:#0f9d58;margin:0 auto;"> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to use Explode effect in jQuery ? B bobby_rao Follow Improve Article Tags : JavaScript Web Technologies JQuery jQuery-Misc Similar Reads jQuery UI Explode Effect 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: s 2 min read How to use hide() method in jQuery ? The hide() method in jQuery is used for hiding the selected web elements. In this article, we will discuss the hide() method in detail. This method is generally used for effects or animation in jQuery. It also allows us to animate the behavior (transition) of hiding any specific element. Syntax:.hid 5 min read 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 How to use keyup with delay in jQuery ? In this article, we will see how to use keyup with a delay in jQuery. There are two ways to achieve the same: Approach 1: Using the keypress(), fadeIn(), delay() and fadeOut() methods in the jQuery library and clearTimeout() and setTimeout() methods in native JavaScript. Firstly, a variable keyupTim 4 min read jQuery Effect fadeOut() Method The fadeOut()Method in jQuery is used to change the level of opacity for selected element from visible to hidden. By using this method, the faded element will not occupy any space. Syntax: $(selector).fadeOut( speed, easing, callback ) Parameters: This method accepts three parameters as mentioned ab 2 min read How to execute jQuery Code ? jQuery is an open-source feature-rich Javascript library that is designed for the simplification of HTML DOM Tree traversal & manipulation, event-handling & CSS animation. It is quite popular for its features like light-weight, fast, small, etc, that make it easier to use. The purpose of usi 4 min read jQuery UI effect() Method jQuery UI framework provides effect() method for managing a variety of visual effects on the selected elements without using show() and hide() methods. Many types of effects are passed as a parameter to the effect() method.Syntax: $(selector).effect(effectType[, options ] [, duration ] [, complete ] 2 min read How to make Water Ripple Effect using jQuery ? In this article we will learn about making water Ripple effects using jQuery, Ripples.js is a well-designed and compact jQuery plugin for producing stunning ripple effects. here we will use jQuery ripple.js. Installation: Before moving further, firstly we have to add the water ripple CDN file to our 2 min read How to make an element “flash†in jQuery ? In this article, we will create flashing elements using jQuery. To use jQuery you need to add jQuery CDN into your HTML document. The methods to create a flashing element are discussed below. Table of Content Using fadeIn() and fadeOut() MethodsUsing toggleClass() methodApproach 1: Using fadeIn() an 2 min read How to Create a Flashing Text Effect using jQuery ? In this article, we are going to create a flashing text using jQuery. It is basically, a text which is visible then it goes invisible, and again it comes back to its original visibility and this process is continued repeatedly, then it is called flashing text. With jQuery, it is very simple to creat 2 min read Like