Permalink
Browse files

Add <figure> and <figcaption> for longdesc imgs

  • Loading branch information...
kswedberg committed Dec 2, 2015
1 parent 1cb3361 commit 306ec8135a911c0b925ad4397f550864cf7e193c
View
@@ -56,12 +56,18 @@ $( "#clickme" ).click(function() {
});
</code></pre>
<p class="image">
<img src="/resources/animate-1.jpg" alt=""/>
<figure>
<img src="/resources/animate-1.jpg" alt=""/>
<figcaption>figure 1</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">
<img src="/resources/animate-2.jpg" alt=""/>
<figure>
<img src="/resources/animate-2.jpg" alt=""/>
<figcaption>figure 2</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>
<p>Directional properties (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) have no discernible effect on elements if their <code>position</code> style property is <code>static</code>, which it is by default.</p>
View
@@ -34,9 +34,10 @@
Trigger the handler
&lt;/div&gt;
</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_03.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Dec 2, 2015

Member

@kswedberg, I'm thinking of adding a bit more here, so it says something like:
figure 1 - Illustration of the rendered HTML
What do you think? I'm also wondering whether we should use Figure 1 or figure 1? @scottgonzalez do you have anything similar to this on UI?

@agcolom

agcolom Dec 2, 2015

Member

@kswedberg, I'm thinking of adding a bit more here, so it says something like:
figure 1 - Illustration of the rendered HTML
What do you think? I'm also wondering whether we should use Figure 1 or figure 1? @scottgonzalez do you have anything similar to this on UI?

This comment has been minimized.

Show comment
Hide comment
@scottgonzalez

scottgonzalez Dec 2, 2015

Member

Nope, we only have live demos. Our resources directory is void of images :-)

@scottgonzalez

scottgonzalez Dec 2, 2015

Member

Nope, we only have live demos. Our resources directory is void of images :-)

This comment has been minimized.

Show comment
Hide comment
@kswedberg

kswedberg Dec 2, 2015

Member

@agcolom : I don't have a preference for capitalized "Figure" or not. Is there a standard in published works? Also, adding a bit more is fine with me, but maybe we should deploy what we have first if there are no errors?

@kswedberg

kswedberg Dec 2, 2015

Member

@agcolom : I don't have a preference for capitalized "Figure" or not. Is there a standard in published works? Also, adding a bit more is fine with me, but maybe we should deploy what we have first if there are no errors?

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Dec 2, 2015

Member

@kswedberg sure. So this is all live and I can just tag and deploy?

@agcolom

agcolom Dec 2, 2015

Member

@kswedberg sure. So this is all live and I can just tag and deploy?

This comment has been minimized.

Show comment
Hide comment
@kswedberg

kswedberg Dec 2, 2015

Member

yeah, it's pushed. Tagging and deploying should be all you need to do.

@scottgonzalez : I'm not seeing the css change on stage.api.jquery.com. Am I correct in assuming that something needs to be pushed to the api.jquery.com repo again before the css change will take effect there?

@kswedberg

kswedberg Dec 2, 2015

Member

yeah, it's pushed. Tagging and deploying should be all you need to do.

@scottgonzalez : I'm not seeing the css change on stage.api.jquery.com. Am I correct in assuming that something needs to be pushed to the api.jquery.com repo again before the css change will take effect there?

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Dec 2, 2015

Member

All up :-) and working :-)
Thank you very much @kswedberg and @scottgonzalez !

@agcolom

agcolom Dec 2, 2015

Member

All up :-) and working :-)
Thank you very much @kswedberg and @scottgonzalez !

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Dec 2, 2015

Member

@kswedberg I've checked your book and it says Figure there. Also it's aligned in the center. So which one do you prefer? I may have a slight preference for the left-aligned but not strongly opinionated on that one :-) @AurelioDeRosa would you have a preference between left-aligned and centered text for the figcaption? Thanks
alignment2
alignment

@agcolom

agcolom Dec 2, 2015

Member

@kswedberg I've checked your book and it says Figure there. Also it's aligned in the center. So which one do you prefer? I may have a slight preference for the left-aligned but not strongly opinionated on that one :-) @AurelioDeRosa would you have a preference between left-aligned and centered text for the figcaption? Thanks
alignment2
alignment

This comment has been minimized.

Show comment
Hide comment
@kswedberg

kswedberg Dec 2, 2015

Member

@agcolom I agree that the left-aligned one looks better. The center-aligned text gets lost, at least to my eyes. And, sure, go with capital "F" :)

@kswedberg

kswedberg Dec 2, 2015

Member

@agcolom I agree that the left-aligned one looks better. The center-aligned text gets lost, at least to my eyes. And, sure, go with capital "F" :)

This comment has been minimized.

Show comment
Hide comment
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

FWIW, I prefer to have a capital letter.

@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

FWIW, I prefer to have a capital letter.

</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code>
$( "#target" ).click(function() {
View
@@ -34,9 +34,10 @@
Trigger the handler
&lt;/div&gt;
</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_04.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code>
$( "#target" ).dblclick(function() {
View
@@ -35,12 +35,13 @@ $( "#clickme" ).click(function() {
});
});
</code></pre>
<p class="image four-across">
<img src="/resources/0042_06_33.png" alt=""/>
<img src="/resources/0042_06_34.png" alt=""/>
<img src="/resources/0042_06_35.png" alt=""/>
<img src="/resources/0042_06_36.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_33.png" alt=""/>

This comment has been minimized.

Show comment
Hide comment
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

I'm not an expert but I wonder if from the accessibility point of view is confusing to have a figure with one figcaption and multiple images.

@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

I'm not an expert but I wonder if from the accessibility point of view is confusing to have a figure with one figcaption and multiple images.

This comment has been minimized.

Show comment
Hide comment
@kswedberg

kswedberg Dec 3, 2015

Member

Good catch, @AurelioDeRosa ! If I understand correctly, grouping images in a single figure is ok, but we should add ARIA attributes. Something like this, I think…

<figure role="group" aria-labelledby="fig1">
    <!-- images -->
    <figcaption id="fig1">Figure 1: …</figcaption>
</figure>
@kswedberg

kswedberg Dec 3, 2015

Member

Good catch, @AurelioDeRosa ! If I understand correctly, grouping images in a single figure is ok, but we should add ARIA attributes. Something like this, I think…

<figure role="group" aria-labelledby="fig1">
    <!-- images -->
    <figcaption id="fig1">Figure 1: …</figcaption>
</figure>

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Dec 3, 2015

Member

Ok, I can make that change. @AurelioDeRosa does this sound good to you?

@agcolom

agcolom Dec 3, 2015

Member

Ok, I can make that change. @AurelioDeRosa does this sound good to you?

<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>
</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>
<h4 id="callback-function">Callback Function</h4>
View
@@ -36,12 +36,13 @@ $( "#clickme" ).click(function() {
});
});
</code></pre>
<p class="image four-across">
<img src="/resources/0042_06_37.png" alt=""/>
<img src="/resources/0042_06_38.png" alt=""/>
<img src="/resources/0042_06_39.png" alt=""/>
<img src="/resources/0042_06_40.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_37.png" alt=""/>

This comment has been minimized.

Show comment
Hide comment
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Same concern here.

@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Same concern here.

<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>
</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>
</div>
View
@@ -50,12 +50,13 @@ $( "#clickme" ).click(function() {
});
});
</code></pre>
<p class="image four-across">
<img src="/resources/0042_06_41.png" alt=""/>
<img src="/resources/0042_06_42.png" alt=""/>
<img src="/resources/0042_06_43.png" alt=""/>
<img src="/resources/0042_06_44.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_41.png" alt=""/>
<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>
</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>
<note id="jquery.fx.off" type="additional" data-title=".fadeTo()"/>
View
@@ -9,9 +9,10 @@
<desc>Get the current computed height for the first element in the set of matched elements.</desc>
<longdesc>
<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>
<p class="image">
<figure>
<img src="/resources/0042_04_01.png"/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>This method is also able to find the height of the window and document.</p>
<pre><code>
// Returns height of browser viewport
View
@@ -52,12 +52,12 @@ $( "#clickme" ).click(function() {
});
});
</code></pre>
<p class="image four-across">
<img src="/resources/0042_06_05.png" alt=""/>
<img src="/resources/0042_06_06.png" alt=""/>
<img src="/resources/0042_06_07.png" alt=""/>
<img src="/resources/0042_06_08.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_05.png" alt=""/>
<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=""/>
</figure>

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Dec 3, 2015

Member

Just realised the figcaption was missing on this one. I'll add it while I add a capital F and add some description.

@agcolom

agcolom Dec 3, 2015

Member

Just realised the figcaption was missing on this one. I'll add it while I add a capital F and add some description.

This comment has been minimized.

Show comment
Hide comment
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Good catch @agcolom!

@AurelioDeRosa

This comment has been minimized.

Show comment
Hide comment
@kswedberg

kswedberg Dec 3, 2015

Member

thanks, @agcolom !

@kswedberg
</longdesc>
<note id="jquery.fx.off" type="additional" data-title=".hide()"/>
<example>
View
@@ -11,9 +11,10 @@
<longdesc>
<p>This method returns the height of the element, including top and bottom padding, in pixels.</p>
<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>
<p class="image">
<figure>
<img src="/resources/0042_04_02.png"/>
</p>
<figcaption>figure 1</figcaption>
</figure>
</longdesc>
<note id="dimensions-number" type="additional" data-title=".innerHeight()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".innerHeight()"/>
View
@@ -10,9 +10,10 @@
<longdesc>
<p>This method returns the width of the element, including left and right padding, in pixels.</p>
<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>
<p class="image">
<figure>
<img src="/resources/0042_04_05.png"/>
</p>
<figcaption>figure 1</figcaption>
</figure>
</longdesc>
<note id="dimensions-number" type="additional" data-title=".innerWidth()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".innerWidth()"/>
View
@@ -33,9 +33,10 @@
Trigger the handler
&lt;/div&gt;
</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_01.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code>
$( "#target" ).mousedown(function() {
View
@@ -37,9 +37,10 @@
Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_08.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
$( "#outer" ).mouseenter(function() {
View
@@ -37,9 +37,10 @@
Trigger the handler
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_09.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
$( "#outer" ).mouseleave(function() {
View
@@ -38,9 +38,10 @@
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;
</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_07.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
$( "#outer" ).mouseout(function() {
View
@@ -38,9 +38,10 @@
&lt;/div&gt;
&lt;div id="log"&gt;&lt;/div&gt;
</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_06.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any element:</p>
<pre><code>
$( "#outer" ).mouseover(function() {
View
@@ -34,9 +34,10 @@
Trigger the handler
&lt;/div&gt;
</code></pre>
<p class="image">
<figure>
<img src="/resources/0042_05_02.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The event handler can be bound to any <code>&lt;div&gt;</code>:</p>
<pre><code>
$( "#target" ).mouseup(function() {
View
@@ -13,9 +13,10 @@
<longdesc>
<p>The top and bottom padding and border are always included in the <code>.outerHeight()</code> calculation; if the <code>includeMargin</code> argument is set to <code>true</code>, the margin (top and bottom) is also included.</p>
<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>
<p class="image">
<figure>
<img src="/resources/0042_04_03.png"/>
</p>
<figcaption>figure 1</figcaption>
</figure>
</longdesc>
<note id="dimensions-number" type="additional" data-title=".outerHeight()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".outerHeight()"/>
View
@@ -14,9 +14,10 @@
<p>Returns the width of the element, along with left and right padding, border, and optionally margin, in pixels.</p>
<p>If <code>includeMargin</code> is omitted or <code>false</code>, the padding and border are included in the calculation; if <code>true</code>, the margin is also included.</p>
<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>
<p class="image">
<figure>
<img src="/resources/0042_04_06.png"/>
</p>
<figcaption>figure 1</figcaption>
</figure>
</longdesc>
<note id="dimensions-number" type="additional" data-title=".outerWidth()"/>
<note id="hidden-element-dimensions" type="additional" data-title=".outerWidth()"/>
@@ -63,7 +64,7 @@ $( "p:last" ).text(
<longdesc>
<p>When calling <code>.outerWidth(value)</code>, the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, any valid CSS measurement may be used (such as <code>100px</code>, <code>50%</code>, or <code>auto</code>).</p>
</longdesc>

This comment has been minimized.

Show comment
Hide comment
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Any reason for this empty line or a simple mistake? I recall we don't use them in our XML files.

@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Any reason for this empty line or a simple mistake? I recall we don't use them in our XML files.

This comment has been minimized.

Show comment
Hide comment
@kswedberg

kswedberg Dec 3, 2015

Member

No reason, except that my text editor automatically adds it on save. Probably no harm either. There's this: http://stackoverflow.com/a/729795. But I'm not sure how relevant it is to our situation here. Is there something in the style guide about not ending with a new line? Is it something that deserves our attention? (honest questions; not being sarcastic.)

@kswedberg

kswedberg Dec 3, 2015

Member

No reason, except that my text editor automatically adds it on save. Probably no harm either. There's this: http://stackoverflow.com/a/729795. But I'm not sure how relevant it is to our situation here. Is there something in the style guide about not ending with a new line? Is it something that deserves our attention? (honest questions; not being sarcastic.)

This comment has been minimized.

Show comment
Hide comment
@scottgonzalez

scottgonzalez Dec 3, 2015

Member

I'm confused. The SO question/answer is about the terminating newline at the end of a file. These are blank lines in the middle of the file. We have no rules in any style guides about whitespace between elements in HTML or XML files.

@scottgonzalez

scottgonzalez Dec 3, 2015

Member

I'm confused. The SO question/answer is about the terminating newline at the end of a file. These are blank lines in the middle of the file. We have no rules in any style guides about whitespace between elements in HTML or XML files.

This comment has been minimized.

Show comment
Hide comment
@scottgonzalez

scottgonzalez Dec 3, 2015

Member

Also, this isn't a new line that @kswedberg created. His editor simply fixed (removed) the trailing whitespace on the existing line.

@scottgonzalez

scottgonzalez Dec 3, 2015

Member

Also, this isn't a new line that @kswedberg created. His editor simply fixed (removed) the trailing whitespace on the existing line.

This comment has been minimized.

Show comment
Hide comment
@kswedberg

kswedberg Dec 3, 2015

Member

Ohh! sorry, @scottgonzalez. you're right. I wasn't looking carefully enough. IMO, this is a non-issue at worst and an improvement at best. ;)

@kswedberg

kswedberg Dec 3, 2015

Member

Ohh! sorry, @scottgonzalez. you're right. I wasn't looking carefully enough. IMO, this is a non-issue at worst and an improvement at best. ;)

This comment has been minimized.

Show comment
Hide comment
@AurelioDeRosa

AurelioDeRosa Dec 7, 2015

Member

It's fine as it is then.

@AurelioDeRosa

AurelioDeRosa Dec 7, 2015

Member

It's fine as it is then.

<example>
<desc>Change the outer width of each div the first time it is clicked (and change its color).</desc>
<code><![CDATA[
@@ -96,7 +97,7 @@ $( "div" ).one( "click", function() {
<div>d</div>
]]></html>
</example>

This comment has been minimized.

Show comment
Hide comment
@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Same here

@AurelioDeRosa

AurelioDeRosa Dec 3, 2015

Member

Same here

<category slug="css"/>
<category slug="dimensions"/>
<category slug="manipulation/style-properties"/>
View
@@ -43,9 +43,10 @@
&lt;div id="log"&gt;&lt;/div&gt;
</code></pre>
<p>The style definition is present to make the target element small enough to be scrollable:</p>
<p class="image">
<figure>
<img src="/resources/0042_05_11.png" alt=""/>
</p>
<figcaption>figure 1</figcaption>
</figure>
<p>The <code>scroll</code> event handler can be bound to this element:</p>
<pre><code>
$( "#target" ).scroll(function() {
View
@@ -53,12 +53,13 @@ $( "#clickme" ).click(function() {
});
});
</code></pre>
<p class="image four-across">
<img src="/resources/0042_06_01.png" alt=""/>
<img src="/resources/0042_06_02.png" alt=""/>
<img src="/resources/0042_06_03.png" alt=""/>
<img src="/resources/0042_06_04.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_01.png" alt=""/>
<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>
</figure>
</longdesc>
<note id="jquery.fx.off" type="additional" data-title=".show()"/>
<example>
View
@@ -36,12 +36,13 @@ $( "#clickme" ).click(function() {
});
});
</code></pre>
<p class="image four-across">
<img src="/resources/0042_06_17.png" alt=""/>
<img src="/resources/0042_06_18.png" alt=""/>
<img src="/resources/0042_06_19.png" alt=""/>
<img src="/resources/0042_06_20.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_17.png" alt=""/>
<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>
</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>
<h4 id="callback-function">Callback Function</h4>
View
@@ -37,19 +37,21 @@ $( "#clickme" ).click(function() {
});
</code></pre>
<p>With the element initially shown, we can hide it slowly with the first click:</p>
<p class="image four-across">
<img src="/resources/0042_06_25.png" alt=""/>
<img src="/resources/0042_06_26.png" alt=""/>
<img src="/resources/0042_06_27.png" alt=""/>
<img src="/resources/0042_06_28.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_25.png" alt=""/>
<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>
</figure>
<p>A second click will show the element once again:</p>
<p class="image four-across">
<img src="/resources/0042_06_29.png" alt=""/>
<img src="/resources/0042_06_30.png" alt=""/>
<img src="/resources/0042_06_31.png" alt=""/>
<img src="/resources/0042_06_32.png" alt=""/>
</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>
</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>
<h4 id="callback-function">Callback Function</h4>
View
@@ -36,12 +36,13 @@ $( "#clickme" ).click(function() {
});
});
</code></pre>
<p class="image four-across">
<img src="/resources/0042_06_21.png" alt=""/>
<img src="/resources/0042_06_22.png" alt=""/>
<img src="/resources/0042_06_23.png" alt=""/>
<img src="/resources/0042_06_24.png" alt=""/>
</p>
<figure>
<img class="column three" src="/resources/0042_06_21.png" alt=""/>
<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>
</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>
<h4 id="callback-function">Callback Function</h4>
Oops, something went wrong.

0 comments on commit 306ec81

Please sign in to comment.