Scaling elements on a page
The scale effect is highly configurable and is used to shrink an element. It is very effective when used to hide elements. In this example we'll use the hide() method to trigger the effect, instead of using the effect method.
We'll use a few of the CSS framework classes in this example, as well as a few custom styles; so add two new <link> elements to the <head> element of effectTransfer.html:
<link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css"> <link rel="stylesheet" href="css/effectScale.css">
Then, replace the underlying markup in the <body> element with the following:
<div class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-widget-header ui-corner-all">
A dialog box
<a id="close" class="ui-icon ui-icon-closethick" href="#">
Close
</a>
</div>
<div class="content">Close the dialog to see the scale effect</div>
</div>Don't...
