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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>Explode Example</title>
      
    <script type = "text/javascript" src=
    </script>
          
    <script type = "text/javascript" src=
    </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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.