How To Explode In Jquery

Exploding elements or creating explosion effects can give a dramatic touch to your website, be it for a game, a promotional event, or just an eye-catching user experience. In this blog post, we will explore how to achieve explosion effects in jQuery using a simple plugin called jQuery UI.


Before we start, make sure you have the following resources included in your HTML file:

  • jQuery library
  • jQuery UI library
  • jQuery UI CSS (for styling)

You can include them in your HTML file using the following code:

    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="">

Exploding an Element with jQuery UI

jQuery UI comes with a built-in effect called explode, which can be used to create explosion effects on elements. The basic syntax for using the effect is as follows:

    $(selector).effect("explode", options, duration, callback);

Let’s break down the components of this syntax:

  • selector: The element you want to explode.
  • options: An object to customize the explosion effect.
  • duration: The duration of the effect in milliseconds.
  • callback: A function to be executed after the effect is complete.


Let’s say we have an image that we want to explode when clicked. We can achieve this using the following code:

    <img id="explode-image" src="path/to/image.jpg" alt="An image to explode">
    $(document).ready(function () {
        $("#explode-image").click(function () {
            $(this).effect("explode", {
                pieces: 16 // Number of pieces to explode into
            }, 1000, function () {
                // Callback function to show the image again after 1 second
                setTimeout(function () {
                    $("#explode-image").show("explode", { pieces: 16 }, 1000);
                }, 1000);

In this example, we first select the image with the ID explode-image and add a click event listener. When the image is clicked, it will explode into 16 pieces over 1 second (1000 milliseconds). After the explosion is complete, we use a callback function to show the image again, reassembling it from the 16 pieces over another 1 second.


We’ve seen that creating explosion effects in jQuery is quite simple using the jQuery UI library. With just a few lines of code, you can add impressive and eye-catching effects to your website. Feel free to experiment with different options and durations to create your very own unique explosion effects!