Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Style and typography fixes.

* Curly apostrophes and quotation marks.
* Em dashes.
* Remove double-spaces after periods.
* Replace stray .note HTML divs with Markdown.
* Remove any trailing whitespace.
* Put inline code Markdown on a few function mentions.
  • Loading branch information...
commit dce8821ea464c51f6e64b71d1e2c9ba33b9add1a 1 parent 45884ad
Markus Amalthea Magnuson alimony authored
4 page/effects.md
View
@@ -6,8 +6,8 @@ customFields:
key: "icon"
value: "picture"
---
-jQuery makes it trivial to add simple effects to your page. Effects can use
-the built-in settings, or provide a customized duration. You can also create
+jQuery makes it trivial to add simple effects to your page. Effects can use
+the built-in settings, or provide a customized duration. You can also create
custom animations of arbitrary CSS properties.
For complete details on jQuery effects, visit the
16 page/effects/custom-effects.md
View
@@ -2,11 +2,11 @@
title : Custom Effects with $.fn.animate
level: beginner
source: http://jqfundamentals.com/legacy
-attribution:
+attribution:
- jQuery Fundamentals
---
jQuery makes it possible to animate arbitrary CSS properties via the
-`$.fn.animate` method. The `$.fn.animate` method lets you animate to a set
+`$.fn.animate` method. The `$.fn.animate` method lets you animate to a set
value, or to a value relative to the current value.
```
@@ -22,18 +22,16 @@ $( "div.funtimes" ).animate({
});
```
-<div class="note">
-Color-related properties cannot be animated with `$.fn.animate` using jQuery
-out of the box. Color animations can easily be accomplished by including the
-[color plugin](http://github.com/jquery/jquery-color). We'll discuss using
+**Note:** Color-related properties cannot be animated with `$.fn.animate` using jQuery
+out of the box. Color animations can easily be accomplished by including the
+[color plugin](http://github.com/jquery/jquery-color). We&rsquo;ll discuss using
plugins later in the book.
-</div>
### Easing
-Definition: Easing describes the manner in which an effect occurs whether
+Definition: Easing describes the manner in which an effect occurs &mdash; whether
the rate of change is steady, or varies over the duration of the animation.
-jQuery includes only two methods of easing: swing and linear. If you want more
+jQuery includes only two methods of easing: swing and linear. If you want more
natural transitions in your animations, various easing plugins are available.
As of jQuery 1.4, it is possible to do per-property easing when using the
70 page/effects/intro-to-effects.md
View
@@ -15,11 +15,11 @@ $( "p" ).hide();
$( "div.hidden" ).show();
```
-When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have
+When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have
zero width and height; it does not mean that the content will simply become transparent and leave an empty area on the page.
-jQuery can also show or hide content by means of animation effects. You can tell
-`$.fn.show` and `$.fn.hide` to use animation in a couple of ways. One is to pass
+jQuery can also show or hide content by means of animation effects. You can tell
+`$.fn.show` and `$.fn.hide` to use animation in a couple of ways. One is to pass
in a string-valued argument of `slow`, `normal`, or `fast`:
```
@@ -30,7 +30,7 @@ $( "p" ).hide( "slow" );
$( "div.hidden" ).show( "fast" );
```
-If you prefer more direct control over the duration of the animation effect, you
+If you prefer more direct control over the duration of the animation effect, you
can pass the desired duration in milliseconds to `$.fn.show` and `$.fn.hide`:
```
@@ -46,11 +46,11 @@ over the duration.
##Fade and Slide Animations
-You may have noticed that `$.fn.show` and `$.fn.hide` use a combination of slide and fade effects
-when showing and hiding content in an animated way. If you would rather show or hide content with
-one effect or the other, there are additional methods that can help. `$.fn.slideDown` and `$.fn.slideUp`
-show and hide content, respectively, using only a slide effect. Slide animations are accomplished by
-rapidly making changes to an element's CSS `height` property.
+You may have noticed that `$.fn.show` and `$.fn.hide` use a combination of slide and fade effects
+when showing and hiding content in an animated way. If you would rather show or hide content with
+one effect or the other, there are additional methods that can help. `$.fn.slideDown` and `$.fn.slideUp`
+show and hide content, respectively, using only a slide effect. Slide animations are accomplished by
+rapidly making changes to an element&rsquo;s CSS `height` property.
```
// Hide all paragraphs using a slide up animation over 0.8 seconds
@@ -60,8 +60,8 @@ $( "p" ).slideUp( 800 );
$( "div.hidden" ).slideDown( 600 );
```
-Similarly `$.fn.fadeIn` and `$.fn.fadeOut` show and hide content, respectively, by means of a fade
-animation. Fade animations involve rapidly making changes to an element's CSS `opacity` property.
+Similarly `$.fn.fadeIn` and `$.fn.fadeOut` show and hide content, respectively, by means of a fade
+animation. Fade animations involve rapidly making changes to an element&rsquo;s CSS `opacity` property.
```
// Hide all paragraphs using a fade out animation over 1.5 seconds
@@ -73,8 +73,8 @@ $( "div.hidden" ).fadeIn( 750 );
##Changing Display Based on Current Visibility State
-jQuery can also let you change a content's visibility based on its current visibility state. `$.fn.toggle`
-will show content that is currently hidden and hide content that is currently visible. You can pass the
+jQuery can also let you change a content&rsquo;s visibility based on its current visibility state. `$.fn.toggle`
+will show content that is currently hidden and hide content that is currently visible. You can pass the
same arguments to `$.fn.toggle` as you pass to any of the effects methods above.
```
@@ -88,7 +88,7 @@ $( "img" ).toggle( "slow" );
$( "div" ).toggle( 1800 );
```
-`$.fn.toggle` will use a combination of slide and fade effects, just as `$.fn.show` and `$.fn.hide` do. You can
+`$.fn.toggle` will use a combination of slide and fade effects, just as `$.fn.show` and `$.fn.hide` do. You can
toggle the display of content with just a slide or a fade using `$.fn.slideToggle` and `$.fn.fadeToggle`.
```
@@ -102,22 +102,22 @@ $( "blockquote" ).fadeToggle( 400 );
##Doing Something After an Animation Completes
A common mistake when implementing jQuery effects is assuming that the execution of the next method in your
-chain will wait until the animation runs to completion.
+chain will wait until the animation runs to completion.
```
// Fade in all hidden paragraphs; then add a style class to them (not quite right)
$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );
```
-It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the
-animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When
-you call `$.fn.fadeIn`, it starts the animation loop and then returns the jQuery object, passing it along
-to `$.fn.addClass` which will then add the `lookAtMe` style class while the animation loop is just
+It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the
+animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When
+you call `$.fn.fadeIn`, it starts the animation loop and then returns the jQuery object, passing it along
+to `$.fn.addClass` which will then add the `lookAtMe` style class while the animation loop is just
getting started.
To defer an action until after an animation has run to completion, you need to use an animation callback
-function. You can specify your animation callback as the second argument passed to any of the
-animation methods discussed above. For the code snippet above, we can implement a callback as follows:
+function. You can specify your animation callback as the second argument passed to any of the
+animation methods discussed above. For the code snippet above, we can implement a callback as follows:
```
// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback)
@@ -127,9 +127,9 @@ $( "p.hidden" ).fadeIn( 750, function() {
});
```
-Note that you can use the keyword `this` to refer to the DOM element being animated. Also note
-that the callback will be called for each element in the jQuery object. This means that if your
-selector returns no elements, your animation callback will never run! You can solve this problem by
+Note that you can use the keyword `this` to refer to the DOM element being animated. Also note
+that the callback will be called for each element in the jQuery object. This means that if your
+selector returns no elements, your animation callback will never run! You can solve this problem by
testing whether your selection returned any elements; if not, you can just run the callback immediately.
```
@@ -153,7 +153,7 @@ jQuery provides some additional features for controlling your animations:
### `$.fn.stop`
-`$.fn.stop` will immediately terminate all animations running on the elements in your selection. You might give
+`$.fn.stop` will immediately terminate all animations running on the elements in your selection. You might give
end-users control over page animations by rigging a button they can click to stop the animations.
```
@@ -168,7 +168,7 @@ $( "input" ).attr({
### `$.fn.delay`
-`$.fn.delay` is used to introduce a delay between successive animations. For example:
+`$.fn.delay` is used to introduce a delay between successive animations. For example:
```
// Hide all level 1 headings over half a second; then wait for 1.5 seconds
@@ -178,9 +178,9 @@ $( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );
### `jQuery.fx`
-The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps
-the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific
-number of milliseconds. The default value of `jQuery.fx.speeds` is:
+The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps
+the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific
+number of milliseconds. The default value of `jQuery.fx.speeds` is:
```
{
@@ -198,15 +198,15 @@ jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.excruciating = 60000;
```
-`jQuery.fx.interval` controls the number of frames per second that are
-displayed in an animation. The default value is 13 milliseconds between
-successive frames. You can set this a lower value for faster browsers
-to make the animations run smoother. However this will mean more frames
-per second and thus a higher computational load for the browser, so you
+`jQuery.fx.interval` controls the number of frames per second that is
+displayed in an animation. The default value is 13 milliseconds between
+successive frames. You can set this to a lower value for faster browsers
+to make the animations run smoother. However this will mean more frames
+per second and thus a higher computational load for the browser, so you
should be sure to test the performance implications of doing so thoroughly.
Finally, `jQuery.fx.off` can be set to true to disable all animations. Elements
-will immediately be set to the target final state instead. This can be
+will immediately be set to the target final state instead. This can be
especially useful when dealing with older browsers; you also may want to
provide the option to disable all animations to your users.
21 page/effects/queue-and-dequeue-explained.md
View
@@ -4,9 +4,9 @@ level: beginner
source: http://jqueryfordesigners.com/api-queue-dequeue/
---
-When you use the animate and show, hide, slideUp, etc effect methods, youre
-adding a job on to the fx queue. By default, using queue and passing a function,
-will add to the fx queue. So were creating our own bespoke animation step:
+When you use the `animate`, and `show`, `hide`, `slideUp`, etc. effect methods, you&rsquo;re
+adding a job to the effects queue. By default, using `queue()` and passing a function,
+will add it to the effects queue. So we&rsquo;re creating our own bespoke animation step:
```
$( ".box" ).animate({
@@ -16,10 +16,10 @@ $( ".box" ).animate({
});
```
-As I said though, these methods come in pairs, so anything you add using queue,
+As I said though, these methods come in pairs, so anything you add using `queue()`,
you need to dequeue to allow the process to continue. In the code above, if I
chained more animations on, until I call `$( this ).dequeue()`, the subsequent
-animations wouldnt run:
+animations wouldn&rsquo;t run:
```
$( ".box" ).animate({
@@ -32,9 +32,9 @@ $( ".box" ).animate({
});
```
-Keeping in mind that the animation wont continue until weve explicitly called
-dequeue, we can easily create a pausing plugin, by adding a step in the queue
-that sets a timer and triggers after n milliseconds, at which time, it dequeues
+Keeping in mind that the animation won&rsquo;t continue until we&rsquo;ve explicitly called
+`dequeue()`, we can easily create a pausing plugin, by adding a step in the queue
+that sets a timer and triggers after `n` milliseconds, at which time, it dequeues
the element:
```
@@ -54,6 +54,5 @@ $( ".box" ).animate({
});
```
-
-Remember that the first argument for queue and dequeue are `fx`, and that in
-all of these examples I’m not including it because jQuery set the argument to `fx` by default - so I don’t have to specify it.
+Remember that the first argument for `queue()` and `dequeue()` is `fx`, and that in
+all of these examples I&rsquo;m not including it because jQuery sets the argument to `fx` by default &mdash; so I don&rsquo;t have to specify it.
22 page/effects/uses-of-queue-and-dequeue.md
View
@@ -6,13 +6,13 @@ source: http://gnarf.net/2010/09/30/the-uses-of-jquery-queue-and-dequeue/
Queues in jQuery are used for animations. You can use them for any purpose you
like. They are an array of functions stored on a per element basis, using
-`jQuery.data()`. The are First-In-First-Out (FIFO). You can add a function to the
+`jQuery.data()`. They are First In, First Out (FIFO). You can add a function to the
queue by calling `.queue()`, and you remove (by calling) the functions using
`.dequeue()`.
To understand the internal jQuery queue functions, reading the source and
looking at examples helps me out tremendously. One of the best examples of a
-queue function Ive seen is `.delay()`:
+queue function I&rsquo;ve seen is `.delay()`:
```
$.fn.delay = function( time, type ) {
@@ -38,27 +38,25 @@ $.fn.delay = function( time, type ) {
## The default queue – fx
-The default queue in jQuery is fx. The default queue has some special
+The default queue in jQuery is `fx`. The default queue has some special
properties that are not shared with other queues.
-- Auto Start: When calling `$(elem).queue(function() {});` the fx queue will
- automatically dequeue the next function and run it if the queue hasnt
+- Auto Start: When calling `$(elem).queue( function() {} );` the fx queue will
+ automatically dequeue the next function and run it if the queue hasn&rsquo;t
started.
-- inprogress sentinel: Whenever you `dequeue()` a function from the fx queue,
+- &ldquo;inprogress&rdquo; sentinel: Whenever you `dequeue()` a function from the fx queue,
it will `unshift()` (push into the first location of the array) the string
- "inprogress" – which flags that the queue is currently being run.
-- Its the default! The fx queue is used by `.animate()` and all functions that
+ &ldquo;inprogress&rdquo; &mdash; which flags that the queue is currently being run.
+- It&rsquo;s the default! The fx queue is used by `.animate()` and all functions that
call it by default.
-<div class="note">
-If you are using a custom queue, you must manually `.dequeue()` the functions, they will not auto start!
-</div>
+**Note:** If you are using a custom queue, you must manually `.dequeue()` the functions, they will not auto start!
## Retrieving/Setting the queue
You can retrieve a reference to a jQuery queue by calling `.queue()` without a
function argument. You can use the method if you want to see how many items are
-in the queue. You can use push, pop, unshift, shift to manipulate the queue in
+in the queue. You can use `push`, `pop`, `unshift`, and `shift` to manipulate the queue in
place. You can replace the entire queue by passing an array to the `.queue()`
function.
Please sign in to comment.
Something went wrong with that request. Please try again.