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
