/
size-effect.xml
39 lines (39 loc) · 1.14 KB
/
size-effect.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?xml version="1.0"?>
<entry name="size" type="effect">
<title>Size Effect</title>
<desc>Resize an element to a specified width and height.</desc>
<arguments>
<argument name="to" type="Object">
<desc>Height and width to resize to.</desc>
</argument>
<argument name="origin" type="Array" default='[ "top", "left" ]'>
<desc>The vanishing point.</desc>
</argument>
<argument name="scale" type="String" default='"both"'>
<desc>Which areas of the element will be resized: <code>"both"</code>, <code>"box"</code>, <code>"content"</code>. Box resizes the border and padding of the element; content resizes any content inside of the element.</desc>
</argument>
</arguments>
<example>
<height>200</height>
<desc>Resize the element using the size effect.</desc>
<css><![CDATA[
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
]]></css>
<code><![CDATA[
$( document ).click(function() {
$( "#toggle" ).effect( "size", {
to: { width: 200, height: 60 }
}, 1000 );
});
]]></code>
<html><![CDATA[
<p>Click anywhere to resize the box.</p>
<div id="toggle"></div>
]]></html>
</example>
<category slug="effects"/>
</entry>