The next effect that we'll look at is scaling, which allows us to shrink or grow any specified element. At the end of the last chapter, we created a page that had a series of boxes on it that could be reordered or closed. When they were closed, they simply vanished instantly from the page.
Let's use the scale effect to make them gracefully shrink to nothing instead. First add the required <script> elements for the effect directly after the <script> element for the cookie plugin:
<script type="text/javascript" src="development-bundle/ui/effects.core.js"></script> <script type="text/javascript" src="development-bundle/ui/effects.scale.js"></script>
Next change the click handler for the close buttons so that it appears as follows:
$(".close", "#sortGrid").click(function() {
$(this).parent().parent().effect("scale", { percent:0 }, "slow", function() {
$(this).appendTo("#hidden").height("").width("").css({ fontSize:"", borderWidth: ""...