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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: