Explode and Implode an Element using jQuery

The jQuery UI contains an ‘explode’ effect that looks awesome! In this post, I will show you how to explode as well as implode an element using jQuery. Here’s the code to do so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<
head>
<
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</
script>
<
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</
script>
<
title>Explode and Implode an Element using jQuery</title>
<
meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<
style type="text/css">
#outer{
width:70px;
height:70px;
background-color:Blue;
}
</style>
</
head>
<
body>
<
input id="btnAction" type="button" value="Click Me" />
<
div id="outer">
</
div>

<
script type="text/javascript">
$("#btnAction").toggle(
function() {
$("#outer").hide('explode', {}, 600);
},
function() {
$("#outer").show('explode', {}, 600);
}
);
</script>
</
body>
</
html>

As you can observe, we are toggling the explode/implode effect. The arguments specified is as follows: effect( effect, [options], [speed], [callback] )

When you run the code, the UI appears similar to the following:

image

On clicking the button, the element explodes in the following manner:

image

You can also specify an option like the number of pieces to be exploded to/imploded from like this:

 $("#btnAction").toggle(
function() {
$("#outer").hide('explode', { pieces: 25}, 600);
},
function() {
$("#outer").show('explode', { pieces: 25 }, 600);
}
);

Note: I have included the JavaScript and CSS in the same page. Ideally, these resources should be kept in separate folders

See a Live Demo






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

No comments: