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

No comments:

Post a Comment