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:

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

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

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?


			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal