Open In App

How to use Explode effect in jQuery ?

Last Updated : 18 Nov, 2019
Improve
Improve
Like Article
Like
Save
Share
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.




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


Output:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads