Skip to content
This repository
Browse code

Updated all effects.

  • Loading branch information...
commit f60167447a8b2600d5b49c33a65c1d236f91e360 1 parent 870a893
Scott González scottgonzalez authored
49 entries/blind-effect.xml
@@ -7,51 +7,30 @@
7 7 <longdesc>
8 8 <p>The container has <code>overflow: hidden</code> applied, so height changes affect what's visible.</p>
9 9 </longdesc>
10   - <options>
11   - <option name="mode" type="String" default='"hide"'>
  10 + <arguments>
  11 + <argument name="direction" type="String" default='"up"'>
12 12 <desc>
13   - <p>UI Effect Mode</p>
14   - <p>Possible Values: </p>
15   - <dl>
16   - <dt>hide</dt>
17   - <dd>Hides the element by pulling a blind in the direction</dd>
18   - <dt>show</dt>
19   - <dd>Shows the element by pulling a blind from the direction. This seems inverted from the hide.</dd>
20   - <dt>toggle</dt>
21   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
22   - </dl>
  13 + <p>The direction the blind will be pulled to hide the element, or the direction from which the element will be revealed.</p>
  14 + <p>Possible Values: <code>up</code>, <code>down</code>, <code>left</code>, <code>right</code>, <code>vertical</code>, <code>horizontal</code>.</p>
23 15 </desc>
24   - </option>
25   - <option name="direction" type="String" default='"up"'>
26   - <desc>
27   - <p>The direction the blind will be pulled to "hide" the element., or the direction from which the element will be revealed.</p>
28   - <p>Possible Values</p>
29   - <dl>
30   - <dt>up</dt>
31   - <dt>down</dt>
32   - <dt>left</dt>
33   - <dt>right</dt>
34   - <dt>vertical</dt>
35   - <dt>horizontal</dt>
36   - </dl>
37   - </desc>
38   - </option>
39   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
40   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
41   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
42   - </options>
  16 + </argument>
  17 + </arguments>
43 18 <example>
44   - <desc>Blind toggle</desc>
  19 + <desc>Toggle a div using the blind effect.</desc>
45 20 <css><![CDATA[
46   - #toggle { width: 100px; height: 70px; background: silver; }
  21 + #toggle {
  22 + width: 100px;
  23 + height: 100px;
  24 + background: #ccc;
  25 + }
47 26 ]]></css>
48 27 <code><![CDATA[
49 28 $( document ).click(function() {
50   - $( "#toggle" ).toggle( { effect: "blind" } );
  29 + $( "#toggle" ).toggle( "blind" );
51 30 });
52 31 ]]></code>
53 32 <html><![CDATA[
54   -Click anywhere to toggle the silver box.
  33 +<p>Click anywhere to toggle the box.</p>
55 34 <div id="toggle"></div>
56 35 ]]></html>
57 36 </example>
59 entries/bounce-effect.xml
@@ -4,57 +4,30 @@
4 4 <desc>
5 5 The bounce effect bounces an element. When used with hide or show, the last or first bounce will also fade in/out.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"effect"'>
9   - <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element by pulling a bouncing out the direction and fading out on the last half bounce</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element by pulling a bouncing in from the direction fading in on the the first half bounce.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - <dt>effect</dt>
20   - <dd>Just bounces the element, doesn't hide or show.</dd>
21   - </dl>
22   - </desc>
23   - </option>
24   - <option name="direction" type="String" default='"up"'>
25   - <desc>
26   - <p>The direction the blind will be pulled to "hide" the element., or the direction from which the element will be revealed.</p>
27   - <p>Possible Values</p>
28   - <dl>
29   - <dt>up</dt>
30   - <dt>down</dt>
31   - <dt>left</dt>
32   - <dt>right</dt>
33   - </dl>
34   - </desc>
35   - </option>
36   - <option name="distance" type="Number" default="20">
37   - <desc>The distance of the largest "bounce" in pixels</desc>
38   - </option>
39   - <option name="times" type="Number" default="5">
40   - <desc>The number of times the element will bounce. When used with hide or show, there is an extra "half" bounce for the fade in/out</desc>
41   - </option>
42   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
43   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
44   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
45   - </options>
  7 + <arguments>
  8 + <argument name="distance" type="Number" default="20">
  9 + <desc>The distance of the largest "bounce" in pixels.</desc>
  10 + </argument>
  11 + <argument name="times" type="Number" default="5">
  12 + <desc>The number of times the element will bounce. When used with hide or show, there is an extra "half" bounce for the fade in/out.</desc>
  13 + </argument>
  14 + </arguments>
46 15 <example>
47   - <desc>Bounce toggle</desc>
  16 + <desc>Toggle a div using the bounce effect.</desc>
48 17 <css><![CDATA[
49   - #toggle { width: 100px; height: 70px; background: silver; }
  18 + #toggle {
  19 + width: 100px;
  20 + height: 100px;
  21 + background: #ccc;
  22 + }
50 23 ]]></css>
51 24 <code><![CDATA[
52 25 $( document ).click(function() {
53   - $( "#toggle" ).toggle( { effect: "bounce" } );
  26 + $( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );
54 27 });
55 28 ]]></code>
56 29 <html><![CDATA[
57   -Click anywhere to toggle the silver box.
  30 +<p>Click anywhere to toggle the box.</p>
58 31 <div id="toggle"></div>
59 32 ]]></html>
60 33 </example>
49 entries/clip-effect.xml
@@ -2,51 +2,32 @@
2 2 <entry name="clip" type="effect">
3 3 <title>Clip Effect</title>
4 4 <desc>
5   - The clip effect will hide or show an element by clipping the element vertically or horizontally
  5 + The clip effect will hide or show an element by clipping the element vertically or horizontally.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"hide"'>
  7 + <arguments>
  8 + <argument name="direction" type="String" default='"up"'>
9 9 <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - </dl>
  10 + <p>The plane in which the clip effect will hide or show its element.</p>
  11 + <p><code>vertical</code> clips the top and bottom edges, while <code>horizontal</code> clips the right and left edges.</p>
20 12 </desc>
21   - </option>
22   - <option name="direction" type="String" default='"up"'>
23   - <desc>
24   - <p>The plane in which the clip effect will hide or show its element</p>
25   - <p>Possible Values</p>
26   - <dl>
27   - <dt>vertical</dt>
28   - <dd>Uses top &amp; bottom edges</dd>
29   - <dt>horizontal</dt>
30   - <dd>Uses left &amp; right edges</dd>
31   - </dl>
32   - </desc>
33   - </option>
34   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
35   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
36   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
37   - </options>
  13 + </argument>
  14 + </arguments>
38 15 <example>
39   - <desc>Clip toggle</desc>
  16 + <desc>Toggle a div using the clip effect.</desc>
40 17 <css><![CDATA[
41   - #toggle { width: 100px; height: 70px; background: silver; }
  18 + #toggle {
  19 + width: 100px;
  20 + height: 100px;
  21 + background: #ccc;
  22 + }
42 23 ]]></css>
43 24 <code><![CDATA[
44 25 $( document ).click(function() {
45   - $( "#toggle" ).toggle( { effect: "click" } );
  26 + $( "#toggle" ).toggle( "clip" );
46 27 });
47 28 ]]></code>
48 29 <html><![CDATA[
49   -Click anywhere to toggle the silver box.
  30 +<p>Click anywhere to toggle the box.</p>
50 31 <div id="toggle"></div>
51 32 ]]></html>
52 33 </example>
47 entries/drop-effect.xml
@@ -4,49 +4,30 @@
4 4 <desc>
5 5 The drop effect hides or shows an element fading in/out and sliding in a direction.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"hide"'>
  7 + <arguments>
  8 + <argument name="direction" type="String" default='"left"'>
9 9 <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element by dropping in the direction</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element by undropping from the direction. This seems inverted from the hide.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - </dl>
  10 + <p>The direction the element will fall to hide the element, or the direction from which the element will be revealed.</p>
  11 + <p>Possible Values: <code>up</code>, <code>down</code>, <code>left</code>, <code>right</code>.</p>
20 12 </desc>
21   - </option>
22   - <option name="direction" type="String" default='"left"'>
23   - <desc>
24   - <p>The direction the element will fall to "hide" the element, or the direction from which the element will be revealed.</p>
25   - <p>Possible Values</p>
26   - <dl>
27   - <dt>up</dt>
28   - <dt>down</dt>
29   - <dt>left</dt>
30   - <dt>right</dt>
31   - </dl>
32   - </desc>
33   - </option>
34   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
35   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
36   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
37   - </options>
  13 + </argument>
  14 + </arguments>
38 15 <example>
39   - <desc>Drop toggle</desc>
  16 + <desc>Toggle a div using the drop effect.</desc>
40 17 <css><![CDATA[
41   - #toggle { width: 100px; height: 70px; background: silver; }
  18 + #toggle {
  19 + width: 100px;
  20 + height: 100px;
  21 + background: #ccc;
  22 + }
42 23 ]]></css>
43 24 <code><![CDATA[
44 25 $( document ).click(function() {
45   - $( "#toggle" ).toggle( { effect: "drop" } );
  26 + $( "#toggle" ).toggle( "drop" );
46 27 });
47 28 ]]></code>
48 29 <html><![CDATA[
49   -Click anywhere to toggle the silver box.
  30 +<p>Click anywhere to toggle the box.</p>
50 31 <div id="toggle"></div>
51 32 ]]></html>
52 33 </example>
37 entries/explode-effect.xml
@@ -4,40 +4,27 @@
4 4 <desc>
5 5 The explode effect hides or shows an element by splitting it into pieces.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"hide"'>
9   - <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element.</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - </dl>
20   - </desc>
21   - </option>
22   - <option name="pieces" type="Number" default="9">
  7 + <arguments>
  8 + <argument name="pieces" type="Number" default="9">
23 9 <desc>The number of pieces to explode, should be a perfect square, any other values are rounded to the nearest square.</desc>
24   - </option>
25   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
26   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
27   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
28   - </options>
  10 + </argument>
  11 + </arguments>
29 12 <example>
30   - <desc>Explode toggle</desc>
  13 + <desc>Toggle a div using the explode effect.</desc>
31 14 <css><![CDATA[
32   - #toggle { width: 100px; height: 70px; background: silver; }
  15 + #toggle {
  16 + width: 100px;
  17 + height: 100px;
  18 + background: #ccc;
  19 + }
33 20 ]]></css>
34 21 <code><![CDATA[
35 22 $( document ).click(function() {
36   - $( "#toggle" ).toggle( { effect: "explode" } );
  23 + $( "#toggle" ).toggle( "explode" );
37 24 });
38 25 ]]></code>
39 26 <html><![CDATA[
40   -Click anywhere to toggle the silver box.
  27 +<p>Click anywhere to toggle the box.</p>
41 28 <div id="toggle"></div>
42 29 ]]></html>
43 30 </example>
31 entries/fade-effect.xml
@@ -4,37 +4,22 @@
4 4 <desc>
5 5 The fade effect hides or shows an element by fading it.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"hide"'>
9   - <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element.</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - </dl>
20   - </desc>
21   - </option>
22   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
23   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
24   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
25   - </options>
26 7 <example>
27   - <desc>Fade toggle</desc>
  8 + <desc>Toggle a div using the fade effect.</desc>
28 9 <css><![CDATA[
29   - #toggle { width: 100px; height: 70px; background: silver; }
  10 + #toggle {
  11 + width: 100px;
  12 + height: 100px;
  13 + background: #ccc;
  14 + }
30 15 ]]></css>
31 16 <code><![CDATA[
32 17 $( document ).click(function() {
33   - $( "#toggle" ).toggle( { effect: "fade" } );
  18 + $( "#toggle" ).toggle( "fade" );
34 19 });
35 20 ]]></code>
36 21 <html><![CDATA[
37   -Click anywhere to toggle the silver box.
  22 +<p>Click anywhere to toggle the box.</p>
38 23 <div id="toggle"></div>
39 24 ]]></html>
40 25 </example>
51 entries/fold-effect.xml
@@ -4,43 +4,36 @@
4 4 <desc>
5 5 The fold effect hides or shows an element by folding it.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"hide"'>
9   - <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element.</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - </dl>
20   - </desc>
21   - </option>
22   - <option name="size" type="Number|String" default="15">
23   - <desc>The size of the "folded" element, can be a number representing px, or a string containing a percentage I.E. "50%"</desc>
24   - </option>
25   - <option name="horizFirst" type="Boolean" default="false">
26   - <desc>If the horizontal direction happens first when hiding. Remember, showing inverts hiding.</desc>
27   - </option>
28   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
29   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
30   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
31   - </options>
  7 + <arguments>
  8 + <argument name="size" default="15">
  9 + <desc>The size of the "folded" element.</desc>
  10 + <type name="Number">
  11 + <desc>The size of the fold in pixels.</desc>
  12 + </type>
  13 + <type name="String">
  14 + <desc>A percentage of the element's dimention, e.g., <code>"50%"</code>.</desc>
  15 + </type>
  16 + </argument>
  17 + <argument name="horizFirst" type="Boolean" default="false">
  18 + <desc>Whether the horizontal direction happens first when hiding. Remember, showing inverts hiding.</desc>
  19 + </argument>
  20 + </arguments>
32 21 <example>
33   - <desc>Fold toggle</desc>
  22 + <desc>Toggle a div using the fold effect.</desc>
34 23 <css><![CDATA[
35   - #toggle { width: 100px; height: 70px; background: silver; }
  24 + #toggle {
  25 + width: 100px;
  26 + height: 100px;
  27 + background: #ccc;
  28 + }
36 29 ]]></css>
37 30 <code><![CDATA[
38 31 $( document ).click(function() {
39   - $( "#toggle" ).toggle( { effect: "fold" } );
  32 + $( "#toggle" ).toggle( "fold" );
40 33 });
41 34 ]]></code>
42 35 <html><![CDATA[
43   -Click anywhere to toggle the silver box.
  36 +<p>Click anywhere to toggle the box.</p>
44 37 <div id="toggle"></div>
45 38 ]]></html>
46 39 </example>
39 entries/highlight-effect.xml
@@ -4,40 +4,27 @@
4 4 <desc>
5 5 The highlight effect hides or shows an element by animating its background color first.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"hide"'>
9   - <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element.</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - </dl>
20   - </desc>
21   - </option>
22   - <option name="color" type="String" default='"#ffff99"'>
23   - <desc>The background color used during the animation</desc>
24   - </option>
25   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
26   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
27   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
28   - </options>
  7 + <arguments>
  8 + <argument name="color" type="String" default='"#ffff99"'>
  9 + <desc>The background color used during the animation.</desc>
  10 + </argument>
  11 + </arguments>
29 12 <example>
30   - <desc>Highlight toggle</desc>
  13 + <desc>Toggle a div using the highlight effect.</desc>
31 14 <css><![CDATA[
32   - #toggle { width: 100px; height: 70px; background: silver; }
  15 + #toggle {
  16 + width: 100px;
  17 + height: 100px;
  18 + background: #ccc;
  19 + }
33 20 ]]></css>
34 21 <code><![CDATA[
35 22 $( document ).click(function() {
36   - $( "#toggle" ).toggle( { effect: "highlight" } );
  23 + $( "#toggle" ).toggle( "highlight" );
37 24 });
38 25 ]]></code>
39 26 <html><![CDATA[
40   -Click anywhere to toggle the silver box.
  27 +<p>Click anywhere to toggle the box.</p>
41 28 <div id="toggle"></div>
42 29 ]]></html>
43 30 </example>
29 entries/puff-effect.xml
@@ -4,32 +4,27 @@
4 4 <desc>
5 5 Creates a puff effect by scaling the element up and hiding it at the same time.
6 6 </desc>
7   - <longdesc>
8   - <p>This is the only effect without a separate file, it shares a file with the scale effect.</p>
9   - </longdesc>
10   - <options>
11   - <option name="mode" type="String" default="hide">
12   - <desc>The mode of the effect. Can be "show" or "hide"</desc>
13   - </option>
14   - <option name="percent" type="Number" default="150">
  7 + <arguments>
  8 + <argument name="percent" type="Number" default="150">
15 9 <desc>The percentage to scale to.</desc>
16   - </option>
17   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
18   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
19   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
20   - </options>
  10 + </argument>
  11 + </arguments>
21 12 <example>
22   - <desc>Puff toggle</desc>
  13 + <desc>Toggle a div using the puff effect.</desc>
23 14 <css><![CDATA[
24   - #toggle { width: 100px; height: 70px; background: silver; }
  15 + #toggle {
  16 + width: 100px;
  17 + height: 100px;
  18 + background: #ccc;
  19 + }
25 20 ]]></css>
26 21 <code><![CDATA[
27 22 $( document ).click(function() {
28   - $( "#toggle" ).toggle( { effect: "puff" } );
  23 + $( "#toggle" ).toggle( "puff" );
29 24 });
30 25 ]]></code>
31 26 <html><![CDATA[
32   -Click anywhere to toggle the silver box.
  27 +<p>Click anywhere to toggle the box.</p>
33 28 <div id="toggle"></div>
34 29 ]]></html>
35 30 </example>
41 entries/pulsate-effect.xml
@@ -4,42 +4,27 @@
4 4 <desc>
5 5 The pulsate effect hides or shows an element by pulsing it in or out.
6 6 </desc>
7   - <options>
8   - <option name="mode" type="String" default='"hide"'>
9   - <desc>
10   - <p>UI Effect Mode</p>
11   - <p>Possible Values: </p>
12   - <dl>
13   - <dt>hide</dt>
14   - <dd>Hides the element.</dd>
15   - <dt>show</dt>
16   - <dd>Shows the element.</dd>
17   - <dt>toggle</dt>
18   - <dd>Will use <code>hide</code> or <code>show</code> depending on the current visibility of the element</dd>
19   - <dt>effect</dt>
20   - <dd>Just pulsates.</dd>
21   - </dl>
22   - </desc>
23   - </option>
24   - <option name="times" type="Number" default="5">
25   - <desc>The number of times the element should pulse. An extra half pulse is added for hide/show</desc>
26   - </option>
27   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
28   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
29   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
30   - </options>
  7 + <arguments>
  8 + <argument name="times" type="Number" default="5">
  9 + <desc>The number of times the element should pulse. An extra half pulse is added for hide/show.</desc>
  10 + </argument>
  11 + </arguments>
31 12 <example>
32   - <desc>Pulsate toggle</desc>
  13 + <desc>Toggle a div using the pulsate effect.</desc>
33 14 <css><![CDATA[
34   - #toggle { width: 100px; height: 70px; background: silver; }
  15 + #toggle {
  16 + width: 100px;
  17 + height: 100px;
  18 + background: #ccc;
  19 + }
35 20 ]]></css>
36 21 <code><![CDATA[
37 22 $( document ).click(function() {
38   - $( "#toggle" ).toggle( { effect: "pulsate" } );
  23 + $( "#toggle" ).toggle( "pulsate" );
39 24 });
40 25 ]]></code>
41 26 <html><![CDATA[
42   -Click anywhere to toggle the silver box.
  27 +<p>Click anywhere to toggle the box.</p>
43 28 <div id="toggle"></div>
44 29 ]]></html>
45 30 </example>
53 entries/scale-effect.xml
@@ -4,50 +4,55 @@
4 4 <desc>
5 5 Shrink or grow an element by a percentage factor.
6 6 </desc>
7   - <options>
8   - <option name="direction" type="String" default="both">
9   - <desc>The direction of the effect. Can be "both", "vertical" or "horizontal".</desc>
10   - </option>
11   - <option name="origin" type="Array" default="['middle','center']">
12   - <desc>The vanishing point, default for show/hide.</desc>
13   - </option>
14   - <option name="percent" type="Number" default="0/100">
  7 + <arguments>
  8 + <argument name="direction" type="String" default='"both"'>
  9 + <desc>The direction of the effect. Possible values: <code>"both"</code>, <code>"vertical"</code> or <code>"horizontal"</code>.</desc>
  10 + </argument>
  11 + <argument name="origin" type="Array" default='[ "middle", "center" ]'>
  12 + <desc>The vanishing point.</desc>
  13 + </argument>
  14 + <argument name="percent" type="Number">
15 15 <desc>The percentage to scale to.</desc>
16   - </option>
17   - <option name="scale" type="String" default="both">
18   - <desc>Which areas of the element will be resized: 'both', 'box', 'content' Box resizes the border and padding of the element Content resizes any content inside of the element</desc>
19   - </option>
20   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
21   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
22   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
23   - </options>
  16 + </argument>
  17 + <argument name="scale" type="String" default="both">
  18 + <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>
  19 + </argument>
  20 + </arguments>
24 21 <example>
25   - <desc>Scale toggle</desc>
  22 + <desc>Toggle a div using the scale effect.</desc>
26 23 <css><![CDATA[
27   - #toggle { width: 100px; height: 70px; background: silver; }
  24 + #toggle {
  25 + width: 100px;
  26 + height: 100px;
  27 + background: #ccc;
  28 + }
28 29 ]]></css>
29 30 <code><![CDATA[
30 31 $( document ).click(function() {
31   - $( "#toggle" ).toggle( { effect: "scale" } );
  32 + $( "#toggle" ).toggle( "scale" );
32 33 });
33 34 ]]></code>
34 35 <html><![CDATA[
35   -Click anywhere to toggle the silver box.
  36 +<p>Click anywhere to toggle the box.</p>
36 37 <div id="toggle"></div>
37 38 ]]></html>
38 39 </example>
39 40 <example>
40   - <desc>Scale toggle, just one direction</desc>
  41 + <desc>Toggle a div using the scale effect in just one direction.</desc>
41 42 <css><![CDATA[
42   - #toggle { width: 100px; height: 70px; background: silver; }
  43 + #toggle {
  44 + width: 100px;
  45 + height: 100px;
  46 + background: #ccc;
  47 + }
43 48 ]]></css>
44 49 <code><![CDATA[
45 50 $( document ).click(function() {
46   - $( "#toggle" ).toggle( { effect: "scale", percent: 200, direction: "horizontal" } );
  51 + $( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" });
47 52 });
48 53 ]]></code>
49 54 <html><![CDATA[
50   -Click anywhere to toggle the silver box.
  55 +<p>Click anywhere to toggle the box.</p>
51 56 <div id="toggle"></div>
52 57 ]]></html>
53 58 </example>
33 entries/shake-effect.xml
@@ -2,32 +2,33 @@
2 2 <entry name="shake" type="effect">
3 3 <title>Shake Effect</title>
4 4 <desc>Shakes the element multiple times, vertically or horizontally.</desc>
5   - <options>
6   - <option name="direction" type="String" default="both">
7   - <desc>The direction of the effect. Can be "left", "right", "up", "down".</desc>
8   - </option>
9   - <option name="distance" type="Number" default="20">
  5 + <arguments>
  6 + <argument name="direction" type="String" default='"both"'>
  7 + <desc>The direction of the effect. Possible values: <code>"left"</code>, <code>"right"</code>, <code>"up"</code>, <code>"down"</code>.</desc>
  8 + </argument>
  9 + <argument name="distance" type="Number" default="20">
10 10 <desc>Distance to shake.</desc>
11   - </option>
12   - <option name="times" type="Number" default="3">
  11 + </argument>
  12 + <argument name="times" type="Number" default="3">
13 13 <desc>Times to shake.</desc>
14   - </option>
15   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
16   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
17   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
18   - </options>
  14 + </argument>
  15 + </arguments>
19 16 <example>
20   - <desc>Shake toggle</desc>
  17 + <desc>Shake a div.</desc>
21 18 <css><![CDATA[
22   - #toggle { width: 100px; height: 70px; background: silver; }
  19 + #toggle {
  20 + width: 100px;
  21 + height: 100px;
  22 + background: #ccc;
  23 + }
23 24 ]]></css>
24 25 <code><![CDATA[
25 26 $( document ).click(function() {
26   - $( "#toggle" ).toggle( { effect: "shake" } );
  27 + $( "#toggle" ).effect( "shake" );
27 28 });
28 29 ]]></code>
29 30 <html><![CDATA[
30   -Click anywhere to toggle the silver box.
  31 +<p>Click anywhere to shake the box.</p>
31 32 <div id="toggle"></div>
32 33 ]]></html>
33 34 </example>
44 entries/size-effect.xml
@@ -2,30 +2,36 @@
2 2 <entry name="size" type="effect">
3 3 <title>Size Effect</title>
4 4 <desc>Resize an element to a specified width and height.</desc>
5   - <options>
6   - <option name="to" type="Object">
7   - <desc>Height and width to resize to.{ height: .., width: .. }</desc>
8   - </option>
9   - <option name="origin" type="Array" default="['top','left']">
10   - <desc>The vanishing point, default for show/hide.</desc>
11   - </option>
12   - <option name="scale" type="String" default="both">
13   - <desc>Which areas of the element will be resized: 'both', 'box', 'content' Box resizes the border and padding of the element Content resizes any content inside of the element.</desc>
14   - </option>
15   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
16   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
17   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
18   - </options>
  5 + <arguments>
  6 + <argument name="to" type="Object">
  7 + <desc>Height and width to resize to.</desc>
  8 + </argument>
  9 + <argument name="origin" type="Array" default='[ "top", "left" ]'>
  10 + <desc>The vanishing point.</desc>
  11 + </argument>
  12 + <argument name="scale" type="String" default="both">
  13 + <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>
  14 + </argument>
  15 + </arguments>
19 16 <example>
20   - <desc>Size an element to 200 x 60.</desc>
21   - <css>div { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }</css>
  17 + <desc>Resize the element using the size effect.</desc>
  18 + <css><![CDATA[
  19 + #toggle {
  20 + width: 100px;
  21 + height: 100px;
  22 + background: #ccc;
  23 + }
  24 +]]></css>
22 25 <code><![CDATA[
23   -$("div").click(function () {
24   - $(this).effect("size", { to: {width: 200,height: 60} }, 1000);
  26 +$( document ).click(function() {
  27 + $( "#toggle" ).effect( "size", {
  28 + to: { width: 200, height: 60 }
  29 + }, 1000 );
25 30 });
26 31 ]]></code>
27 32 <html><![CDATA[
28   -<div></div>
  33 +<p>Click anywhere to resize the box.</p>
  34 +<div id="toggle"></div>
29 35 ]]></html>
30 36 </example>
31 37 <category slug="effects"/>
34 entries/slide-effect.xml
@@ -2,32 +2,30 @@
2 2 <entry name="slide" type="effect">
3 3 <title>Slide Effect</title>
4 4 <desc>Slides the element out of the viewport.</desc>
5   - <options>
6   - <option name="direction" type="String" default="both">
7   - <desc>The direction of the effect. Can be "left", "right", "up", "down".</desc>
8   - </option>
9   - <option name="distance" type="Number" default="el.outerWidth">
10   - <desc>The distance of the effect. Is set to either the height or width of the elemenet depending on the direction option. Can be set to any integer less than the width/height of the element.</desc>
11   - </option>
12   - <option name="mode" type="String" default="show">
13   - <desc>The mode of the effect. Can be "show" or "hide"</desc>
14   - </option>
15   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
16   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
17   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
18   - </options>
  5 + <arguments>
  6 + <argument name="direction" type="String" default="both">
  7 + <desc>The direction of the effect. Possible values: <code>"left"</code>, <code>"right"</code>, <code>"up"</code>, <code>"down"</code>.</desc>
  8 + </argument>
  9 + <argument name="distance" type="Number" default="element's outerWidth">
  10 + <desc>The distance of the effect. Defaults to either the height or width of the elemenet depending on the <code>direction</code> argument. Can be set to any integer less than the width/height of the element.</desc>
  11 + </argument>
  12 + </arguments>
19 13 <example>
20   - <desc>Slide toggle</desc>
  14 + <desc>Toggle a div using the slide effect.</desc>
21 15 <css><![CDATA[
22   - #toggle { width: 100px; height: 70px; background: silver; }
  16 + #toggle {
  17 + width: 100px;
  18 + height: 100px;
  19 + background: #ccc;
  20 + }
23 21 ]]></css>
24 22 <code><![CDATA[
25 23 $( document ).click(function() {
26   - $( "#toggle" ).toggle( { effect: "slide", direction: "up" } );
  24 + $( "#toggle" ).toggle( "slide" );
27 25 });
28 26 ]]></code>
29 27 <html><![CDATA[
30   -Click anywhere to toggle the silver box.
  28 +<p>Click anywhere to toggle the box.</p>
31 29 <div id="toggle"></div>
32 30 ]]></html>
33 31 </example>
48 entries/transfer-effect.xml
@@ -4,30 +4,42 @@
4 4 <desc>Transfers the outline of an element to another element</desc>
5 5 <longdesc>
6 6 <p>Very useful when trying to visualize interaction between two elements.</p>
7   - <p>The transfer element iself has the class name "ui-effects-transfer", and needs to be styled by you, for example by adding a background or border.</p>
  7 + <p>The transfer element iself has the class <code>ui-effects-transfer</code>, and needs to be styled by you, for example by adding a background or border.</p>
8 8 </longdesc>
9   - <options>
10   - <option name="className" type="String">
11   - <desc>Optional class name the transfer element will receive.</desc>
12   - </option>
13   - <option name="to" type="String">
  9 + <arguments>
  10 + <argument name="className" type="String">
  11 + <desc>argumental class name the transfer element will receive.</desc>
  12 + </argument>
  13 + <argument name="to" type="String">
14 14 <desc>jQuery selector, the element to transfer to.</desc>
15   - </option>
16   - <xi:include href="../includes/animation-option-duration.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
17   - <xi:include href="../includes/animation-option-easing.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
18   - <xi:include href="../includes/animation-option-complete.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
19   - </options>
  15 + </argument>
  16 + </arguments>
20 17 <example>
21 18 <desc>Clicking on the green element transfers to the other.</desc>
22 19 <css><![CDATA[
23   - div.green { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
24   - div.red { margin-top: 10px; width: 50px; height: 30px; background: red; border: 1px solid black; position: relative; }
25   - .ui-effects-transfer { border: 1px dotted black; }
26   - ]]></css>
  20 + div.green {
  21 + width: 100px;
  22 + height: 80px;
  23 + background: green;
  24 + border: 1px solid black;
  25 + position: relative;
  26 + }
  27 + div.red {
  28 + margin-top: 10px;
  29 + width: 50px;
  30 + height: 30px;
  31 + background: red;
  32 + border: 1px solid black;
  33 + position: relative;
  34 + }
  35 + .ui-effects-transfer {
  36 + border: 1px dotted black;
  37 + }
  38 +]]></css>
27 39 <code><![CDATA[
28   -$("div").click(function () {
29   - var i = 1 - $("div").index(this);
30   - $(this).effect("transfer", { to: $("div").eq(i) }, 1000);
  40 +$( "div" ).click(function() {
  41 + var i = 1 - $( "div" ).index( this );
  42 + $( this ).effect( "transfer", { to: $( "div" ).eq( i ) }, 1000 );
31 43 });
32 44 ]]></code>
33 45 <html><![CDATA[
29 entries2html-base.xsl
@@ -204,6 +204,9 @@
204 204 <xsl:when test="@type='widget'">
205 205 <xsl:call-template name="entry-body-widget"/>
206 206 </xsl:when>
  207 + <xsl:when test="@type='effect'">
  208 + <xsl:call-template name="entry-body-effect"/>
  209 + </xsl:when>
207 210 </xsl:choose>
208 211 </xsl:template>
209 212
@@ -376,6 +379,30 @@
376 379 </xsl:if>
377 380 </xsl:template>
378 381
  382 +<xsl:template name="entry-body-effect">
  383 + <ul class="signatures">
  384 + <li class="signature">
  385 + <h4 class="name">
  386 + <xsl:if test="signature/added">
  387 + <span class="versionAdded">
  388 + version added:
  389 + <a href="/category/version/{signature/added}/">
  390 + <xsl:value-of select="added"/>
  391 + </a>
  392 + </span>
  393 + </xsl:if>
  394 + <xsl:value-of select="@name"/>
  395 + </h4>
  396 +
  397 + <xsl:if test="arguments">
  398 + <ul><xsl:for-each select="arguments/argument">
  399 + <xsl:apply-templates select="."/>
  400 + </xsl:for-each></ul>
  401 + </xsl:if>
  402 + </li>
  403 + </ul>
  404 +</xsl:template>
  405 +
379 406 <!-- examples -->
380 407 <xsl:template match="example">
381 408 <xsl:param name="entry-index"/>
@@ -393,7 +420,7 @@
393 420
394 421 <h4>
395 422 <xsl:if test="$number-examples &gt; 1">Example: </xsl:if>
396   - <span class="desc"><xsl:value-of select="desc"/></span>
  423 + <span class="desc"><xsl:apply-templates select="desc"/></span>
397 424 </h4>
398 425 <pre><code data-linenum="true">
399 426 <xsl:choose>
4 includes/animation-option-complete.xml
... ... @@ -1,4 +0,0 @@
1   -<?xml verion="1.0"?>
2   -<option name="complete" type="Function">
3   - <desc>A function to call once the animation is complete.</desc>
4   -</option>
6 includes/animation-option-duration.xml
... ... @@ -1,6 +0,0 @@
1   -<?xml version="1.0"?>
2   -<option name="duration" default="400">
3   - <desc>A string or number determining how long the animation will run.</desc>
4   - <type name="Number"/>
5   - <type name="String"/>
6   -</option>
4 includes/animation-option-easing.xml
... ... @@ -1,4 +0,0 @@
1   -<?xml version="1.0"?>
2   -<option name="easing" type="String" default="swing">
3   - <desc>A string indicating which easing function to use for the transition.</desc>
4   -</option>

0 comments on commit f601674

Please sign in to comment.
Something went wrong with that request. Please try again.