explode and implode effect

explode and implode effect


Good day. I want to add a simple explode effect to a div box when the
mouse is over it. So far I have been able to explode it but I want it
to implode back to the original state when the mouse is out or moved
away from it.
this what my main html file looks like:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"
title="no title" charset="utf-8" />
    <script type="text/javascript" src="me/jquery-1.2.6.js"></script>
    <script type="text/javascript" src="me/effects.core.js"></script>
<script type="text/javascript" src="me/effects.shake.js"></
script>
    <script type="text/javascript" src="me/effects.explode.js"></script>
    <script type="text/javascript" src="me.js"></script>
</head>
<body>
        <div class="effect" id="explode9">
        

and Explode in 9 pieces


        </div>
</body>
</html>
And this is where I am having trouble, my "me.js" file:
$(document).ready(function(){
$("div").mouseover(function () {
$(this).effect("explode", {}, 1000);
});
$("div").mouseout(function () {
$(this).effect("implode", {}, 1000);
});
});
please any help will be greatly appreciated.