Create an Exploding and Imploding Effect using jQuery

You can easily create an exploding and imploding effect on your web page using jQuery. The jQuery UI provides simple methods that we can use to create some amazing effects. In this post, I am sharing few examples that will show you how to explode and implode elements and texts using jQuery.

The explode (or implode) effect can be created using the .show(), .hide() and .toggle() methods in jQuery. You can three different methods. I’ll show you all the methods in my examples here.

1) Explode or Implode an element using the “.toggle()” method

Syntax: $(selector).toggle('explode', 'number_of_pieces', 'speed')

The jQuery .toggle() method toggles between .show() and .hide() methods. I have explained the method in my previous posts here. For example,

$(div).toggle(1000);

It will simply show and hide the element. The speed. To create an exploding and imploding effect, you can pass a explode property along with a value (number) for pieces.

Here’s an example,

<html>
<head>
    <title>Creating Explode effect using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
    <p>
        Click anywhere to create an Exploding and Imploding effect.
    </p>

    <div id="circle"
        style="
        	position: absolute;
            left: 10%;
            top: 10%;
        	width: 100px;
            height: 100px;
            line-height: 100px;
            border-radius: 50%;
            background-color: #000;">
    </div>
</body>
<script>
    $(document).ready(function () {
        $('body').click(function () {
            $("#circle")
                .toggle('explode', { pieces: 150 }, 1000);
        });
    });
</script>
</html>

Try it

I have provided three different parameters to the .toggle() method. It has the explode property, number of pieces and the speed (1000 milliseconds) at which it will explode (or implode). Try reducing or increasing the speed and pieces and see what happens.

2) Explode an element using the “.hide()” method

The .hide() method takes the same type of parameters like the .toggle() method. However, make sure the element is visible on your web page. Else, you will not see the effect.

Should we now try with another element this time? Ok, let’s see the effect on an image.

<html>
<head>
    <title>jQuery Explode effect using .hide() method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
    <p>
        Click anywhere on this section of the page!
    </p>

    <img src="../../images/theme/easy-image-resizer.jpg" width="200px" id="myImage">
</body>
<script>
    $(document).ready(function () {
        $('body').click(function (e) {
            $("#myImage")
                .hide('explode', { pieces: 150 }, 1000);
        });
    });
</script>
</html>

Try it

Beautiful isn’t it.

3) Implode an element using the “.show()” method

The .show() method will work when your element (on which you want the effect to work) is not visible on your web page. Using this method, you can create an imploding effect.

There will be a slight change in the styling part. Use display: none to hide the element first.

<html>
<head>
    <title>Create an imploding effect in jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

    <style>
    	input[type=button], div{ 
            font: 17px Calibri;
            width: auto;
            cursor: pointer;
            padding: 7px;
        }
    </style>

</head>
<body>
    <p>
        <input type="button" value="Click to Show!" id="bt"/>
    </p>

    <div id="container"
    	style="display: none;
        text-align: center;
        padding: 5px;
        color: #000;
        background-color: #f3f3f3;
        width: 300px;
        height: auto;
        position: absolute;
        left: 5%;">
    
    	The <a href="../../onlinetools/resize-crop-image-online.aspx" target="_default">Easy Image Resizer</a> is a 3 simple step free online image optimization tool, which allows you to select, crop and resize an image or picture of your choice, any time and from anywhere. 
    </div>
</body>
<script>
    $(document).ready(function () {
        $('#bt').click(function (e) {
            $("#container")
                .show('explode', { pieces: 50 }, 1000);
        });
    });
</script>
</html>

Try it

Conclusion

That’s it. The methods are so simple to use that you can explode or implode any element on your web page. The effects are smooth and nice. You can also create other cool effects using the above jQuery methods. Use the methods wisely.

← PreviousNext →