The explode (or implode) effect can be created using the .show(), .hide(), and .toggle() methods in jQuery. I'll demonstrate all three methods in my examples.
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 .toggle() in the above example, took a parameter (1000 milliseconds) for 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>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 number of 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>🙂 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{
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>These methods are simple to use, allowing you to explode or implode any element on your web page smoothly. You can also create other cool effects using the jQuery methods mentioned above. Use them wisely.