Skip to content
Related Articles

Related Articles

How to use Explode effect in jQuery ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 18 Nov, 2019

The Explode effect can be used with show/hide/toggle element. This explodes or implodes the element into/from many pieces.


selector.hide | show | toggle( "explode", {arguments}, speed );


  • 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.

    <title>Explode Example</title>
    <script type = "text/javascript" src=
    <script type = "text/javascript" src=
    <script type = "text/javascript" language = "javascript">
        $(document).ready(function() {
                $(".target").hide( "explode", {pieces: 9 }, 2000 );
                $(".target").show( "explode", {pieces: 9}, 2000 );
<body style = "text-align:center;">
    <h1 style = "color:green;"
    <p style = "font-size: 20px; font-weight: bold;">
        Click on any of the buttons
    <button id = "hide"> Hide </button>
    <button id = "show"> Show</button
    <div class = "target" style="width:100px;height:100px;
            background:#0f9d58;margin:0 auto;">


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!