Entries: Added description to Figures

Closes gh-841

Author: agcolom

entries/animate.xml

@@ -58,15 +58,15 @@ $( "#clickme" ).click(function() {
     <p class="image">
       <figure>
         <img src="/resources/animate-1.jpg" alt=""/>
-        <figcaption>figure 1</figcaption>
+        <figcaption>Figure 1 - Illustration of the specified animation effect</figcaption>
       </figure>
     </p>
     <p>Note that the target value of the <code>height</code> property is <code>'toggle'</code>. Since the image was visible before, the animation shrinks the height to 0 to hide it. A second click then reverses this transition:
     </p>
     <p class="image">
       <figure>
         <img src="/resources/animate-2.jpg" alt=""/>
-        <figcaption>figure 2</figcaption>
+        <figcaption>Figure 2  - Illustration of the specified animation effect</figcaption>
       </figure>
     </p>
     <p>The <code>opacity</code> of the image is already at its target value, so this property is not animated by the second click. Since the target value for <code>left</code> is a relative value, the image moves even farther to the right during this second animation.</p>

entries/click.xml

@@ -36,7 +36,7 @@
     </code></pre>
     <figure>
       <img src="/resources/0042_05_03.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
     <pre><code>

entries/dblclick.xml

@@ -36,7 +36,7 @@
     </code></pre>
     <figure>
       <img src="/resources/0042_05_04.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
     <pre><code>

entries/fadeIn.xml

@@ -40,7 +40,7 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_34.png" alt=""/>
       <img class="column three" src="/resources/0042_06_35.png" alt=""/>
       <img class="column three" src="/resources/0042_06_36.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>fadeIn()</code> effect</figcaption>
     </figure>
     <h4 id="easing">Easing</h4>
     <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>

entries/fadeOut.xml

@@ -41,7 +41,7 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_38.png" alt=""/>
       <img class="column three" src="/resources/0042_06_39.png" alt=""/>
       <img class="column three" src="/resources/0042_06_40.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>fadeOut()</code> effect</figcaption>
     </figure>
     <div class="warning">
       <p><strong>Note: </strong>To avoid unnecessary DOM manipulation, <code>.fadeOut()</code> will not hide an element that is already considered hidden. For information on which elements jQuery considers hidden, see <a href="/hidden-selector/"> :hidden Selector</a>.</p>

entries/fadeTo.xml

@@ -55,7 +55,7 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_42.png" alt=""/>
       <img class="column three" src="/resources/0042_06_43.png" alt=""/>
       <img class="column three" src="/resources/0042_06_44.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>fadeTo()</code> effect</figcaption>
     </figure>
     <p>With <code>duration</code> set to <code>0</code>, this method just changes the <code>opacity</code> CSS property, so <code>.fadeTo( 0, opacity )</code> is the same as <code>.css( "opacity", opacity )</code>.</p>
   </longdesc>

entries/height.xml

@@ -11,7 +11,7 @@
       <p>The difference between <code>.css( "height" )</code> and <code>.height()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.height()</code> method is recommended when an element's height needs to be used in a mathematical calculation.</p>
       <figure>
         <img src="/resources/0042_04_01.png"/>
-        <figcaption>figure 1</figcaption>
+        <figcaption>Figure 1 - Illustration of the measured height</figcaption>
       </figure>
       <p>This method is also able to find the height of the window and document.</p>
       <pre><code>

entries/hide.xml

@@ -60,6 +60,7 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_06.png" alt=""/>
       <img class="column three" src="/resources/0042_06_07.png" alt=""/>
       <img class="column three" src="/resources/0042_06_08.png" alt=""/>
+      <figcaption>Figure 1 - Illustration of the <code>hide()</code> effect</figcaption>
     </figure>
   </longdesc>
   <note id="jquery.fx.off" type="additional" data-title=".hide()"/>

entries/innerHeight.xml

@@ -13,7 +13,7 @@
     <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/height/">.height()</a></code> instead.</p>
     <figure>
       <img src="/resources/0042_04_02.png"/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the measured height</figcaption>
     </figure>
   </longdesc>
 	<note id="dimensions-number" type="additional" data-title=".innerHeight()"/>

entries/innerWidth.xml

@@ -12,7 +12,7 @@
     <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/width/">.width()</a></code> instead.</p>
     <figure>
       <img src="/resources/0042_04_05.png"/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the measured width</figcaption>
     </figure>
   </longdesc>
 	<note id="dimensions-number" type="additional" data-title=".innerWidth()"/>

entries/mousedown.xml

@@ -35,7 +35,7 @@
     </code></pre>
     <figure>
       <img src="/resources/0042_05_01.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
     <pre><code>

entries/mouseenter.xml

@@ -39,7 +39,7 @@
 &lt;div id="log"&gt;&lt;/div&gt;</code></pre>
     <figure>
       <img src="/resources/0042_05_08.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any element:</p>
     <pre><code>

entries/mouseleave.xml

@@ -39,7 +39,7 @@
 &lt;div id="log"&gt;&lt;/div&gt;</code></pre>
     <figure>
       <img src="/resources/0042_05_09.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any element:</p>
     <pre><code>

entries/mouseout.xml

@@ -40,7 +40,7 @@
     </code></pre>
     <figure>
       <img src="/resources/0042_05_07.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any element:</p>
     <pre><code>

entries/mouseover.xml

@@ -40,7 +40,7 @@
     </code></pre>
     <figure>
       <img src="/resources/0042_05_06.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any element:</p>
     <pre><code>

entries/mouseup.xml

@@ -36,7 +36,7 @@
 </code></pre>
     <figure>
       <img src="/resources/0042_05_02.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
     <pre><code>

entries/outerHeight.xml

@@ -15,7 +15,7 @@
     <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/height/">.height()</a></code> instead.</p>
     <figure>
       <img src="/resources/0042_04_03.png"/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the measured height</figcaption>
     </figure>
   </longdesc>
 	<note id="dimensions-number" type="additional" data-title=".outerHeight()"/>

entries/outerWidth.xml

@@ -16,7 +16,7 @@
     <p>This method is not applicable to <code>window</code> and <code>document</code> objects; for these, use <code><a href="/width/">.width()</a></code> instead. Although <code>.outerWidth()</code> can be used on table elements, it may give unexpected results on tables using the <code>border-collapse: collapse</code> CSS property.</p>
     <figure>
       <img src="/resources/0042_04_06.png"/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the measured width</figcaption>
     </figure>
   </longdesc>
 	<note id="dimensions-number" type="additional" data-title=".outerWidth()"/>

entries/scroll.xml

@@ -45,7 +45,7 @@
     <p>The style definition is present to make the target element small enough to be scrollable:</p>
     <figure>
       <img src="/resources/0042_05_11.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the rendered HTML</figcaption>
     </figure>
     <p>The <code>scroll</code> event handler can be bound to this element:</p>
     <pre><code>

entries/show.xml

@@ -61,7 +61,7 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_02.png" alt=""/>
       <img class="column three" src="/resources/0042_06_03.png" alt=""/>
       <img class="column three" src="/resources/0042_06_04.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>show()</code> effect</figcaption>
     </figure>
   </longdesc>
   <note id="jquery.fx.off" type="additional" data-title=".show()"/>

entries/slideDown.xml

@@ -41,7 +41,7 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_18.png" alt=""/>
       <img class="column three" src="/resources/0042_06_19.png" alt=""/>
       <img class="column three" src="/resources/0042_06_20.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>slideDown()</code> effect</figcaption>
     </figure>
     <h4 id="easing">Easing</h4>
     <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>

entries/slideToggle.xml

@@ -42,15 +42,15 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_26.png" alt=""/>
       <img class="column three" src="/resources/0042_06_27.png" alt=""/>
       <img class="column three" src="/resources/0042_06_28.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>slideToggle()</code> effect when hiding the image</figcaption>
     </figure>
     <p>A second click will show the element once again:</p>
     <figure>
       <img class="column three" src="/resources/0042_06_29.png" alt=""/>
       <img class="column three" src="/resources/0042_06_30.png" alt=""/>
       <img class="column three" src="/resources/0042_06_31.png" alt=""/>
       <img class="column three" src="/resources/0042_06_32.png" alt=""/>
-      <figcaption>figure 2</figcaption>
+      <figcaption>Figure 2 - Illustration of the <code>slideToggle()</code> effect when showing the image</figcaption>
     </figure>
     <h4 id="easing">Easing</h4>
     <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>

entries/slideUp.xml

@@ -41,7 +41,7 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_22.png" alt=""/>
       <img class="column three" src="/resources/0042_06_23.png" alt=""/>
       <img class="column three" src="/resources/0042_06_24.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>slideUp()</code> effect</figcaption>
     </figure>
     <h4 id="easing">Easing</h4>
     <p><strong>As of jQuery 1.4.3</strong>, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called <code>swing</code>, and one that progresses at a constant pace, called <code>linear</code>. More easing functions are available with the use of plug-ins, most notably the <a href="http://jqueryui.com">jQuery UI suite</a>.</p>

entries/toggle.xml

@@ -64,15 +64,15 @@ $( "#clickme" ).click(function() {
       <img class="column three" src="/resources/0042_06_10.png" alt=""/>
       <img class="column three" src="/resources/0042_06_11.png" alt=""/>
       <img class="column three" src="/resources/0042_06_12.png" alt=""/>
-      <figcaption>figure 1</figcaption>
+      <figcaption>Figure 1 - Illustration of the <code>toggle()</code> effect when hiding the image</figcaption>
     </figure>
     <p>A second click will show the element once again:</p>
     <figure>
       <img class="column three" src="/resources/0042_06_13.png" alt=""/>
       <img class="column three" src="/resources/0042_06_14.png" alt=""/>
       <img class="column three" src="/resources/0042_06_15.png" alt=""/>
       <img class="column three" src="/resources/0042_06_16.png" alt=""/>
-      <figcaption>figure 2</figcaption>
+      <figcaption>Figure 2 - Illustration of the <code>toggle()</code> effect when showing the image</figcaption>
     </figure>
     <p>The second version of the method accepts a Boolean parameter. If this parameter is <code>true</code>, then the matched elements are shown; if <code>false</code>, the elements are hidden. In essence, the statement:
     </p>

entries/width.xml

@@ -11,7 +11,7 @@
       <p>The difference between <code>.css(width)</code> and <code>.width()</code> is that the latter returns a unit-less pixel value (for example, <code>400</code>) while the former returns a value with units intact (for example, <code>400px</code>). The <code>.width()</code> method is recommended when an element's width needs to be used in a mathematical calculation.</p>
       <figure>
         <img src="/resources/0042_04_04.png"/>
-        <figcaption>figure 1</figcaption>
+        <figcaption>Figure 1 - Illustration of the measured width</figcaption>
       </figure>
       <p>This method is also able to find the width of the window and document.</p>
       <pre><code>