From 71ca7f3a0583d4bca6641ea5b3c194e40b6e7a14 Mon Sep 17 00:00:00 2001
From: Christian Rank
Date: Thu, 2 Oct 2014 11:11:47 +0200
Subject: [PATCH 01/91] using-jquery-core: make `jq()` function escape
backticks too
Closes gh-557
---
...element-by-an-id-that-has-characters-used-in-css-notation.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md b/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md
index 8d71ebb6..c29fcdd9 100644
--- a/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md
+++ b/page/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation.md
@@ -25,7 +25,7 @@ The following function takes care of escaping these characters and places a "#"
```
function jq( myid ) {
- return "#" + myid.replace( /(:|\.|\[|\])/g, "\\$1" );
+ return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );
}
```
From 10081d77590b57bde7dc0352df28a23d746f6ecf Mon Sep 17 00:00:00 2001
From: Arthur Verschaeve
Date: Sat, 31 Jan 2015 18:30:28 +0100
Subject: [PATCH 02/91] 0.6.3
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 67fdd066..542c3afc 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "learn.jquery.com",
"title": "jQuery Learning Site",
"description": "jQuery Foundation site for learning jQuery and JavaScript",
- "version": "0.6.2",
+ "version": "0.6.3",
"homepage": "http://learn.jquery.com",
"author": {
"name": "jQuery Foundation and other contributors"
From 9afaf6747fb40e6c033ab36d7dda2013dddd08f7 Mon Sep 17 00:00:00 2001
From: Eric Mill
Date: Sun, 1 Feb 2015 22:27:39 -0500
Subject: [PATCH 03/91] Switch links to code.jquery.com urls to be https now
that everything supports it.
Closes gh-628
---
page/jquery-mobile/getting-started.md | 6 +++---
page/jquery-mobile/theme-roller.md | 6 +++---
page/jquery-ui/environments.md | 2 +-
page/performance/read-the-source.md | 2 +-
page/using-jquery-core/document-ready.md | 2 +-
5 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/page/jquery-mobile/getting-started.md b/page/jquery-mobile/getting-started.md
index 9fdf1c54..47e0d49d 100644
--- a/page/jquery-mobile/getting-started.md
+++ b/page/jquery-mobile/getting-started.md
@@ -19,9 +19,9 @@ In the ``, a div with a `data-role` of `page` is the wrapper used to delin
My Page
-
-
-
+
+
+
diff --git a/page/jquery-mobile/theme-roller.md b/page/jquery-mobile/theme-roller.md
index c3aa5cf4..dfb73d67 100644
--- a/page/jquery-mobile/theme-roller.md
+++ b/page/jquery-mobile/theme-roller.md
@@ -63,9 +63,9 @@ To start using your theme, you can either start from the provided `index.html`,
-
-
-
+
+
+
```
diff --git a/page/jquery-ui/environments.md b/page/jquery-ui/environments.md
index 11489664..f7b0fc75 100644
--- a/page/jquery-ui/environments.md
+++ b/page/jquery-ui/environments.md
@@ -3,4 +3,4 @@
"level": "intermediate"
}
-In addition to being available on [CDN](http://code.jquery.com/)s and [Download Builder](http://jqueryui.com/download/), jQuery UI also integrates into a number of development environments.
\ No newline at end of file
+In addition to being available on [CDN](https://code.jquery.com/)s and [Download Builder](http://jqueryui.com/download/), jQuery UI also integrates into a number of development environments.
\ No newline at end of file
diff --git a/page/performance/read-the-source.md b/page/performance/read-the-source.md
index 78ee465c..0e7c8f47 100644
--- a/page/performance/read-the-source.md
+++ b/page/performance/read-the-source.md
@@ -5,4 +5,4 @@
"attribution": [ "jQuery Fundamentals" ]
}
-Use the source as your documentation. Bookmark [the source code](http://code.jquery.com/jquery/) and refer to it often.
+Use the source as your documentation. Bookmark [the source code](https://code.jquery.com/jquery/) and refer to it often.
diff --git a/page/using-jquery-core/document-ready.md b/page/using-jquery-core/document-ready.md
index db3182a1..da379ebe 100644
--- a/page/using-jquery-core/document-ready.md
+++ b/page/using-jquery-core/document-ready.md
@@ -40,7 +40,7 @@ The example below shows `$( document ).ready()` and `$( window ).load()` in acti
```
-
+
```
-Note that if you use this technique, you will not be able to use prototype.js methods inside the immediately invoked function that expect `$` to be prototype.js's `$`.
+Note that if you use this technique, you will not be able to use prototype.js methods inside the immediately invoked function. `$` will be a reference to jQuery, not prototype.js.
### Use the Argument That's Passed to the `jQuery( document ).ready()` Function
From fa001a650469db0cb8f76d4f5dd63fdefbbd3d7b Mon Sep 17 00:00:00 2001
From: Arthur Verschaeve
Date: Tue, 24 Feb 2015 20:22:24 +0100
Subject: [PATCH 06/91] 0.6.5
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 542c3afc..7751288c 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "learn.jquery.com",
"title": "jQuery Learning Site",
"description": "jQuery Foundation site for learning jQuery and JavaScript",
- "version": "0.6.3",
+ "version": "0.6.5",
"homepage": "http://learn.jquery.com",
"author": {
"name": "jQuery Foundation and other contributors"
From 5f3873c7a7708f6138f0f58de96f94dead56d916 Mon Sep 17 00:00:00 2001
From: Aurelio De Rosa
Date: Sun, 6 Jul 2014 13:10:31 +0100
Subject: [PATCH 07/91] plugins/advanced-plugin-concepts: clarify best-practice
Fixes gh-513
Closes gh-526
---
page/plugins/advanced-plugin-concepts.md | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/page/plugins/advanced-plugin-concepts.md b/page/plugins/advanced-plugin-concepts.md
index d193b56e..28333478 100644
--- a/page/plugins/advanced-plugin-concepts.md
+++ b/page/plugins/advanced-plugin-concepts.md
@@ -240,10 +240,14 @@ A bad implementation:
```
// Plugin code
-$( "").appendTo( "body" );
+$( "" ).appendTo( "body" );
-$( "#the-gallery-wrapper" ).append( "..." );
+$( ".gallery-wrapper" ).append( "..." );
+```
+
+To allow users to access and even manipulate those information, you can store them in a variable containing the settings of your plugin. A better implementation of the previous code is shown below:
+```
// Retain an internal reference:
var wrapper = $( "" )
.attr( settings.wrapperAttrs )
@@ -258,7 +262,7 @@ Notice that we've created a reference to the injected wrapper and we're also cal
```
var defaults = {
wrapperAttrs : {
- id: "gallery-wrapper"
+ class: "gallery-wrapper"
},
// ... rest of settings ...
};
From 0c966d3fb5f07c29c5bc4e82f203a6d6b45f1984 Mon Sep 17 00:00:00 2001
From: Arthur Verschaeve
Date: Tue, 24 Feb 2015 21:52:32 +0100
Subject: [PATCH 08/91] 0.6.6
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 7751288c..15800e46 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "learn.jquery.com",
"title": "jQuery Learning Site",
"description": "jQuery Foundation site for learning jQuery and JavaScript",
- "version": "0.6.5",
+ "version": "0.6.6",
"homepage": "http://learn.jquery.com",
"author": {
"name": "jQuery Foundation and other contributors"
From f9d0ab36e48de77aa9b5fc8f137bb2d86280d39d Mon Sep 17 00:00:00 2001
From: Corey Frang
Date: Wed, 25 Feb 2015 12:29:15 -0500
Subject: [PATCH 09/91] Custom Events: Remove broken application and improve
quality
Closes gh-632
Fixes gh-475
---
page/events/introduction-to-custom-events.md | 268 ++-----------------
1 file changed, 25 insertions(+), 243 deletions(-)
diff --git a/page/events/introduction-to-custom-events.md b/page/events/introduction-to-custom-events.md
index 72287e43..c05ff497 100644
--- a/page/events/introduction-to-custom-events.md
+++ b/page/events/introduction-to-custom-events.md
@@ -7,7 +7,7 @@
## Custom Events
-We're all familiar with the basic events — click, mouseover, focus, blur, submit, etc. — that we can latch on to as a user interacts with the browser. Custom events open up a whole new world of event-driven programming. In this chapter, we'll use jQuery's custom events system to make a simple Twitter search application.
+We're all familiar with the basic events — click, mouseover, focus, blur, submit, etc. — that we can latch on to as a user interacts with the browser. Custom events open up a whole new world of event-driven programming.
It can be difficult at first to understand why you'd want to use custom events, when the built-in events seem to suit your needs just fine. It turns out that custom events offer a whole new way of thinking about event-driven JavaScript. Instead of focusing on the element that triggers an action, custom events put the spotlight on the element being acted upon. This brings a bevy of benefits, including:
@@ -32,8 +32,8 @@ Without custom events, you might write some code like this:
```
$( ".switch, .clapper" ).click(function() {
- var light = $( this ).parent().find( ".lightbulb" );
- if ( light.hasClass( "on" ) ) {
+ var light = $( this ).closest( ".room" ).find( ".lightbulb" );
+ if ( light.is( ".on" ) ) {
light.removeClass( "on" ).addClass( "off" );
} else {
light.removeClass( "off" ).addClass( "on" );
@@ -44,9 +44,9 @@ $( ".switch, .clapper" ).click(function() {
With custom events, your code might look more like this:
```
-$( ".lightbulb" ).on( "changeState", function( e ) {
+$( ".lightbulb" ).on( "light:toggle", function( event ) {
var light = $( this );
- if ( light.hasClass( "on" ) ) {
+ if ( light.is( ".on" ) ) {
light.removeClass( "on" ).addClass( "off" );
} else {
light.removeClass( "off" ).addClass( "on" );
@@ -54,7 +54,8 @@ $( ".lightbulb" ).on( "changeState", function( e ) {
});
$( ".switch, .clapper" ).click(function() {
- $( this ).parent().find( ".lightbulb" ).trigger( "changeState" );
+ var room = $( this ).closest( ".room" );
+ room.find( ".lightbulb" ).trigger( "light:toggle" );
});
```
@@ -78,38 +79,44 @@ Let's make our example a little more interesting. We'll add another room to our
```
-If there are any lights on in the house, we want the master switch to turn all the lights off; otherwise, we want it to turn all lights on. To accomplish this, we'll add two more custom events to the lightbulbs: `turnOn` and `turnOff`. We'll make use of them in the `changeState` custom event, and use some logic to decide which one the master switch should trigger:
+If there are any lights on in the house, we want the master switch to turn all the lights off; otherwise, we want it to turn all lights on. To accomplish this, we'll add two more custom events to the lightbulbs: `light:on` and `light:off`. We'll make use of them in the `light:toggle` custom event, and use some logic to decide which one the master switch should trigger:
```
-$( ".lightbulb" ).on( "changeState", function( e ) {
+$( ".lightbulb" ).on( "light:toggle", function( event ) {
var light = $( this );
- if ( light.hasClass( "on" ) ) {
- light.trigger( "turnOff" );
+ if ( light.is( ".on" ) ) {
+ light.trigger( "light:off" );
} else {
- light.trigger( "turnOn" );
+ light.trigger( "light:on" );
}
-}).on( "turnOn", function( e ) {
+}).on( "light:on", function( event ) {
$( this ).removeClass( "off" ).addClass( "on" );
-}).on( "turnOff", function( e ) {
+}).on( "light:off", function( event ) {
$( this ).removeClass( "on" ).addClass( "off" );
});
$( ".switch, .clapper" ).click(function() {
- $( this ).parent().find( ".lightbulb" ).trigger( "changeState" );
+ var room = $( this ).closest( ".room" );
+ room.find( ".lightbulb" ).trigger( "light:toggle" );
});
$( "#master_switch" ).click(function() {
- if ( $( ".lightbulb.on" ).length ) {
- $( ".lightbulb" ).trigger( "turnOff" );
+ var lightbulbs = $( ".lightbulb" );
+
+ // Check if any lightbulbs are on
+ if ( lightbulbs.is( ".on" ) ) {
+ lightbulbs.trigger( "light:off" );
} else {
- $( ".lightbulb" ).trigger( "turnOn" );
+ lightbulbs.trigger( "light:on" );
}
});
```
Note how the behavior of the master switch is attached to the master switch; the behavior of a lightbulb belongs to the lightbulbs.
-If you're accustomed to object-oriented programming, you may find it useful to think of custom events as methods of objects. Loosely speaking, the object to which the method belongs is created via the jQuery selector. Binding the `changeState` custom event to all `$( ".light" )` elements is akin to having a class called `Light` with a method of `changeState`, and then instantiating new `Light` objects for each element with a classname of `light`.
+### Naming Custom Events
+
+You can use any name for a custom event, however you should beware of creating new events with names that might be used by future DOM events. For this reason, in this article we have chosen to use `light:` for all of our event names, as events with colons are unlikely to be used by a future DOM spec.
### Recap: `.on()` and `.trigger()`
@@ -133,231 +140,6 @@ $( document ).on( "myCustomEvent", {
$( document ).trigger( "myCustomEvent", [ "bim", "baz" ] );
```
-### A Sample Application
-
-To demonstrate the power of custom events, we're going to create a simple tool for searching Twitter. The tool will offer several ways for a user to add search terms to the display: by entering a search term in a text box, by entering multiple search terms in the URL, and by querying Twitter for trending terms.
-
-The results for each term will be shown in a results container; these containers will be able to be expanded, collapsed, refreshed, and removed, either individually or all at once.
-
-When we're done, it will look like this:
-
-
-
-```
-
Twitter Search
-
-
-
-
-
-
-
Search Results for
-
-
-
-```
-
-This gives us a container (`#twitter`) for our widget, a template for our results containers (hidden via CSS), and a simple form where users can input a search term. (For the sake of simplicity, we're going to assume that our application is JavaScript-only and that our users will always have CSS.)
-
-There are two types of objects we'll want to act on: the results containers, and the Twitter container.
-
-The results containers are the heart of the application. We'll create a plugin that will prepare each results container once it's added to the Twitter container. Among other things, it will bind the custom events for each container and add the action buttons at the top right of each container. Each results container will have the following custom events:
-
-* `refresh` — Mark the container as being in the "refreshing" state, and fire the request to fetch the data for the search term.
-
-* `populate` — Receive the returned JSON data and use it to populate the container.
-
-* `remove` — Remove the container from the page after the user verifies the request to do so. Verification can be bypassed by passing `true` as the second argument to the event handler. The `remove` event also removes the term associated with the results container from the global object containing the search terms.
-
-* `collapse` — Add a class of collapsed to the container, which will hide the results via CSS. It will also turn the container's "Collapse" button into an "Expand" button.
-
-* `expand` — Remove the collapsed class from the container. It will also turn the container's "Expand" button into a "Collapse" button.
-
-The plugin is also responsible for adding the action buttons to the container. It binds a click event to each action's list item, and uses the list item's class to determine which custom event will be triggered on the corresponding results container.
-
-```
-$.fn.twitterResult = function( settings ) {
- return this.each(function() {
- var results = $( this );
- var actions = $.fn.twitterResult.actions =
- $.fn.twitterResult.actions || $.fn.twitterResult.createActions();
- var a = actions.clone().prependTo( results );
- var term = settings.term;
-
- results.find( "span.search_term" ).text( term );
- $.each([ "refresh", "populate", "remove", "collapse", "expand" ], function( i, ev ) {
- results.on( ev, {
- term: term
- }, $.fn.twitterResult.events[ ev ] );
- });
-
- // Use the class of each action to figure out
- // which event it will trigger on the results panel
- a.find( "li" ).click(function() {
-
- // Pass the li that was clicked to the function
- // so it can be manipulated if needed
- results.trigger( $( this ).attr( "class" ), [ $( this ) ] );
- });
- });
-};
-
-$.fn.twitterResult.createActions = function() {
- return $( "
" ).append(
- "
Refresh
" +
- "
Remove
" +
- "
Collapse
"
- );
-};
-
-$.fn.twitterResult.events = {
- refresh: function( e ) {
-
- // Indicate that the results are refreshing
- var elem = $( this ).addClass( "refreshing" );
-
- elem.find( "p.tweet" ).remove();
- results.append( "
Loading...
" );
-
- // Get the twitter data using jsonp
- $.getJSON( "http://search.twitter.com/search.json?q=" + escape( e.data.term ) + "&rpp=5&callback=?", function( json ) {
- elem.trigger( "populate", [ json ] );
- });
- },
-
- populate: function( e, json ) {
- var results = json.results;
- var elem = $( this );
-
- elem.find( "p.loading" ).remove();
- $.each( results, function( i, result ) {
- var tweet = "
";
-
- elem.append( tweet );
- });
-
- // Indicate that the results are done refreshing
- elem.removeClass("refreshing");
- },
-
- remove: function( e, force ) {
- if ( !force && !confirm( "Remove panel for term " + e.data.term + "?" ) ) {
- return;
- }
- $( this ).remove();
-
- // Indicate that we no longer have a panel for the term
- search_terms[ e.data.term ] = 0;
- },
-
- collapse: function( e ) {
- $( this ).find( "li.collapse" )
- .removeClass( "collapse" )
- .addClass( "expand" )
- .text( "Expand" );
-
- $( this ).addClass( "collapsed" );
- },
-
- expand: function( e ) {
- $( this ).find( "li.expand" )
- .removeClass( "expand" )
- .addClass( "collapse" )
- .text( "Collapse" );
-
- $( this ).removeClass( "collapsed" );
- }
-};
-```
-
-The Twitter container itself will have just two custom events:
-
-* `getResults` — Receives a search term and checks to determine whether there's already a results container for the term; if not, adds a results container using the results template, set up the results container using the `$.fn.twitterResult` plugin discussed above, and then triggers the `refresh` event on the results container in order to actually load the results. Finally, it will store the search term so the application knows not to re-fetch the term.
-
-* `getTrends` — Queries Twitter for the top 10 trending terms, then iterates over them and triggers the `getResults` event for each of them, thereby adding a results container for each term.
-
-Here's how the Twitter container bindings look:
-
-```
-$( "#twitter" ).on( "getResults", function( e, term ) {
-
- // Make sure we don't have a box for this term already
- if ( !search_terms[ term ] ) {
- var elem = $( this );
- var template = elem.find( "div.template" );
-
- // Make a copy of the template div
- // and insert it as the first results box
- results = template.clone()
- .removeClass( "template" )
- .insertBefore( elem.find( "div:first" ) )
- .twitterResult({
- "term": term
- });
-
- // Load the content using the "refresh"
- // custom event that we bound to the results container
- results.trigger( "refresh" );
-
- search_terms[ term ] = 1;
- }
-}).on( "getTrends", function( e ) {
- var elem = $( this );
-
- $.getJSON( "http://search.twitter.com/trends.json?callback=?", function( json ) {
- var trends = json.trends;
- $.each( trends, function( i, trend ) {
- elem.trigger( "getResults", [ trend.name ] );
- });
- });
-});
-```
-
-So far, we've written a lot of code that does approximately nothing, but that's OK. By specifying all the behaviors that we want our core objects to have, we've created a solid framework for rapidly building out the interface.
-
-Let's start by hooking up our text input and the "Load Trending Terms" button. For the text input, we'll capture the term that was entered in the input and pass it as we trigger the Twitter container's `getResults` event. Clicking the "Load Trending Terms" will trigger the Twitter container's `getTrends` event:
-
-```
-$( "form" ).submit(function( event ) {
- var term = $( "#search_term" ).val();
- $( "#twitter" ).trigger( "getResults", [ term ] );
- event.preventDefault();
-});
-
-$( "#get_trends" ).click(function() {
- $( "#twitter" ).trigger( "getTrends" );
-});
-```
-
-By adding a few buttons with the appropriate ID's, we can make it possible to remove, collapse, expand, and refresh all results containers at once, as shown below. For the remove button, note how we're passing a value of `true` to the event handler as its second argument, telling the event handler that we don't want to verify the removal of individual containers.
-
-```
-$.each([ "refresh", "expand", "collapse" ], function( i, ev ) {
- $( "#" + ev ).click( function( e ) {
- $( "#twitter div.results" ).trigger( ev );
- });
-});
-
-$( "#remove" ).click(function( e ) {
- if ( confirm( "Remove all results?" ) ) {
- $( "#twitter div.results" ).trigger( "remove", [ true ] );
- }
-});
-```
-
### Conclusion
Custom events offer a new way of thinking about your code: they put the emphasis on the target of a behavior, not on the element that triggers it. If you take the time at the outset to spell out the pieces of your application, as well as the behaviors those pieces need to exhibit, custom events can provide a powerful way for you to "talk" to those pieces, either one at a time or en masse. Once the behaviors of a piece have been described, it becomes trivial to trigger those behaviors from anywhere, allowing for rapid creation of and experimentation with interface options. Finally, custom events can enhance code readability and maintainability, by making clear the relationship between an element and its behaviors.
From aef941e30f99739dbd4eed7ed7f7d6fbf5fe7696 Mon Sep 17 00:00:00 2001
From: Arthur Verschaeve
Date: Sat, 28 Feb 2015 16:45:48 +0100
Subject: [PATCH 10/91] 0.6.7
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 15800e46..79ae6b8d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "learn.jquery.com",
"title": "jQuery Learning Site",
"description": "jQuery Foundation site for learning jQuery and JavaScript",
- "version": "0.6.6",
+ "version": "0.6.7",
"homepage": "http://learn.jquery.com",
"author": {
"name": "jQuery Foundation and other contributors"
From f9572e24766d362eb66ab818f5c24dc8384d376f Mon Sep 17 00:00:00 2001
From: Arthur Verschaeve
Date: Sun, 1 Mar 2015 10:16:03 +0100
Subject: [PATCH 11/91] Effects: Merge 2 articles on queues
Fixes gh-77
Closes gh-633
---
order.json | 3 +-
page/effects/queue-and-dequeue-explained.md | 122 ++++++++---
page/effects/uses-of-queue-and-dequeue.md | 214 --------------------
3 files changed, 93 insertions(+), 246 deletions(-)
delete mode 100644 page/effects/uses-of-queue-and-dequeue.md
diff --git a/order.json b/order.json
index 8527b06a..ee998761 100644
--- a/order.json
+++ b/order.json
@@ -59,8 +59,7 @@
"effects": [
"intro-to-effects",
"custom-effects",
- "queue-and-dequeue-explained",
- "uses-of-queue-and-dequeue"
+ "queue-and-dequeue-explained"
]
},
{
diff --git a/page/effects/queue-and-dequeue-explained.md b/page/effects/queue-and-dequeue-explained.md
index c527d75f..b72cfaec 100644
--- a/page/effects/queue-and-dequeue-explained.md
+++ b/page/effects/queue-and-dequeue-explained.md
@@ -4,53 +4,115 @@
"source": "http://jqueryfordesigners.com/api-queue-dequeue/"
}
-When you use the `.animate()`, `.show()`, `.hide()`, `.slideUp()`, etc. effect methods, you'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're creating our own bespoke animation step:
+Queues are the foundation for all animations in jQuery, they allow a series functions to be executed asynchronously on an element. Methods such as `.slideUp()`, `.slideDown()`, `.fadeIn()`, and `.fadeOut()` all use `.animate()`, which leverages *queues* to build up the series of steps that will transition one or more CSS values throughout the duration of the animation.
+
+We can pass a callback function to the `.animate()` method, which will execute once the animation has completed.
```
$( ".box" )
- .animate({
+ .animate( {
height: 20
- }, "slow" )
- .queue(function() {
- $( "#title" ).html( "We're in the animation, baby!" );
- });
+ }, "slow", function() {
+ $( "#title" ).html( "We're in the callback, baby!" );
+ } );
```
-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 wouldn't run:
+## Queues As Callbacks
+
+Instead of passing a callback as an argument, we can add another function to the *queue* that will act as our callback. This will execute after all of the steps in the animation have completed.
```
$( ".box" )
- .animate({
+ .animate( {
height: 20
- }, "slow" )
- .queue(function() {
+ }, "slow")
+ .queue( function() {
$( "#title" ).html( "We're in the animation, baby!" );
+
+ // This tells jQuery to continue to the next item in the queue
$( this ).dequeue();
- }).animate({
- height: 150
- });
+ } );
+
```
-Keeping in mind that the animation won't continue until we'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 `delay` milliseconds, at which time, it dequeues the element:
+In this example, the queued function will execute right after the animation.
+
+jQuery does not have any insight into how the queue items function, so we need to call `.dequeue()`, which tells jQuery when to move to the next item in the queue.
+Another way of *dequeuing* is by calling the function that is passed to your callback. That function will automatically call `.dequeue()` for you.
+
+```
+.queue( function( next ) {
+ console.log( "I fired!" );
+ next();
+} );
```
-$.fn.pause = function( delay ) {
- return this.queue(function() {
- var elem = this;
- setTimeout(function() {
- return $( elem ).dequeue();
- }, delay );
- });
-};
+## Custom Queues
+
+Up to this point all of our animation and queue examples have been using the default queue name which is `fx`. Elements can have multiple queues attached to them, and we can give each of these queues a different name. We can specify a custom queue name as the first argument to the `.queue()` method.
+
+```
$( ".box" )
- .animate({
- height: 20
- }, "slow" )
- .pause( 1000 )
- .animate({
- height: 150
- });
+ .queue( "steps", function( next ) {
+ console.log( "Step 1" );
+ next();
+ } )
+ .queue( "steps", function( next ) {
+ console.log( "Step 2" );
+ next();
+ } )
+ .dequeue( "steps" );
+```
+
+Notice that we have to call the `.dequeue()` method passing it the name of our custom queue to start the execution. Every queue except for the default, `fx`, has to be manually kicked off by calling `.dequeue()` and passing it the name of the queue.
+
+## Clearing The Queue
+
+Since queues are just a set of ordered operations, our application may have some logic in place that needs to prevent the remaining queue entries from executing. We can do this by calling the `.clearQueue()` method, which will empty the queue.
+
+```
+$( ".box" )
+ .queue( "steps", function( next ) {
+ console.log( "Will never log because we clear the queue" );
+ next();
+ } )
+ .clearQueue( "steps" )
+ .dequeue( "steps" );
+```
+
+In this example, nothing will happen as we removed everything from the `steps` queue.
+
+Another way of clearing the queue is to call `.stop( true )`. That will stop the currently running animations and will clear the queue.
+
+## Replacing The Queue
+
+When you pass an array of functions as second argument to `.queue()`, that array will replace the queue.
+
+```
+$( ".box" )
+ .queue( "steps", function( next ) {
+ console.log( "I will never fire as we totally replace the queue" );
+ next();
+ } )
+ .queue( "steps", [
+ function( next ) {
+ console.log( "I fired!" );
+ next();
+ }
+ ] )
+ .dequeue( "steps" );
+```
+
+You can also call `.queue()` without passing it functions, which will return the queue of that element as an array.
+
```
+$( ".box" ).queue( "steps", function( next ) {
+ console.log( "I fired!" );
+ next();
+} );
-Remember that the first argument for `.queue()` and `.dequeue()` is `fx`, and that in all of these examples I'm not including it because jQuery sets the argument to `fx` by default — so I don't have to specify it.
+console.log( $( ".box" ).queue( "steps" ) );
+
+$( ".box" ).dequeue( "steps" );
+```
diff --git a/page/effects/uses-of-queue-and-dequeue.md b/page/effects/uses-of-queue-and-dequeue.md
deleted file mode 100644
index edc04b98..00000000
--- a/page/effects/uses-of-queue-and-dequeue.md
+++ /dev/null
@@ -1,214 +0,0 @@
-
-
-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()`. 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 I've seen is `.delay()`:
-
-```
-$.fn.delay = function( time, type ) {
- time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
- type = type || "fx";
-
- return this.queue( type, function( next, hooks ) {
- var timeout = setTimeout( next, time );
- hooks.stop = function() {
- clearTimeout( timeout );
- };
- });
-};
-```
-
-## The default queue – fx
-
-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 hasn't started.
-* "inprogress" 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.
-* It's the default! The fx queue is used by `.animate()` and all functions that call it by default.
-
-**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`, and `shift` to manipulate the queue in place. You can replace the entire queue by passing an array to the `.queue()` function.
-
-## Quick Examples:
-
-```
-// Assume elem is a jQuery object that contains an element we are animating
-var queue = elem.queue();
-
-// Remove the last function from the animation queue
-var lastFunc = queue.pop();
-
-// Insert it at the beginning
-queue.unshift( lastFunc );
-
-// Replace queue with the first three items in the queue
-elem.queue( queue.slice( 0, 3 ) );
-```
-
-### An animation (fx) queue example:
-
-```
-$(function() {
-
- // Let's do something with Google Maps
- var canvas = $( "#map_canvas" );
-
- var latlng = new google.maps.LatLng( -34.397, 150.644 );
-
- var options = {
- zoom: 8,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- var geocoder = new google.maps.Geocoder();
-
- var map = new google.maps.Map( canvas[0], options );
-
- var resized = function() {
-
- // Simple animation callback - let maps know we resized
- google.maps.event.trigger( map, "resize" );
- };
-
- // Wait for two seconds
- canvas.delay( 2000 );
-
- // Resize the div
- canvas.animate({
- width: 250,
- height: 250,
- marginLeft: 250,
- marginTop:250
- }, resized );
-
- // Geocode something
- canvas.queue(function( next ) {
-
- // Find Stack Overflow's whois address
- geocoder.geocode( {
- address: "55 Broadway New York NY 10006"
- }, handleResponse );
-
- function handleResponse( results, status ) {
- if ( status === google.maps.GeocoderStatus.OK ) {
- var location = results[ 0 ].geometry.location;
- map.setZoom( 13 );
- map.setCenter( location );
- new google.maps.Marker({
- map: map,
- position: location
- });
- }
-
- // Geocoder result returned, continue with animations
- next();
- }
- });
-
- // After we find Stack Overflow, wait 3 more seconds
- canvas.delay( 3000 );
-
- // Then resize the map again
- canvas.animate({
- width: 500,
- height: 500,
- marginLeft:0,
- marginTop: 0
- }, resized );
-});
-```
-
-### Queueing something like Ajax Calls:
-
-```
-// jQuery on an empty object, we are going to use this as our queue
-var ajaxQueue = $({});
-
-$.ajaxQueue = function( ajaxOpts ) {
-
- // Hold the original complete function
- var oldComplete = ajaxOpts.complete;
-
- // Queue our ajax request
- ajaxQueue.queue(function( next ) {
-
- // Create a complete callback to invoke the next event in the queue
- ajaxOpts.complete = function() {
-
- // Invoke the original complete if it was there
- if ( oldComplete ) {
- oldComplete.apply( this, arguments );
- }
-
- // Run the next query in the queue
- next();
- };
-
- // Run the query
- $.ajax( ajaxOpts );
- });
-};
-
-// Get each item we want to copy
-$( "#items li" ).each(function( idx ) {
-
- // Queue up an ajax request
- $.ajaxQueue({
- url: "/ajax_html_echo/",
- data: {
- html: "[" + idx + "] " + $( this ).html()
- },
- type: "POST",
- success: function( data ) {
-
- // Write to #output
- $( "#output" ).append( $( "
", {
- html: data
- }));
- }
- });
-});
-```
-
-### Another custom queue example
-
-```
-// jQuery on an empty object - a perfect queue holder
-var theQueue = $({});
-
-$.each([ 1, 2, 3 ], function( i, num ) {
-
- // Add some really simple functions to a queue
- theQueue.queue( "alerts", function( next ) {
-
- // Show something, and if the user clicks "yes", run the next function
- if ( confirm( "index: " + i + " = " + num + "\nRun the next function?" ) ) {
- next();
- }
- });
-});
-
-// Create a button to run the queue
-$( "