From 58ac547bfc533562a3885b4fe9f2a0ba60dd3aac Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Thu, 14 Mar 2013 12:33:20 -0400 Subject: [PATCH] Style and typography fixes, and code style adherence in the Effects section. Fixes #290. --- page/effects.md | 4 +- page/effects/custom-effects.md | 42 ++- page/effects/intro-to-effects.md | 147 +++++---- page/effects/queue-and-dequeue-explained.md | 63 ++-- page/effects/uses-of-queue-and-dequeue.md | 324 +++++++++----------- 5 files changed, 264 insertions(+), 316 deletions(-) diff --git a/page/effects.md b/page/effects.md index 2c01d1c8..3a91733b 100644 --- a/page/effects.md +++ b/page/effects.md @@ -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 diff --git a/page/effects/custom-effects.md b/page/effects/custom-effects.md index 0d460c33..b7f53b8a 100644 --- a/page/effects/custom-effects.md +++ b/page/effects/custom-effects.md @@ -2,50 +2,46 @@ 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. ``` -// Custom effects with `$.fn.animate`"> -$("div.funtimes").animate({ - left : "+=50", - opacity : 0.25 - }, - // duration: - 300, - // callback: - function() { - console.log("done!"); - } +// Custom effects with $.fn.animate +$( "div.funtimes" ).animate({ + left: "+=50", + opacity: 0.25 + }, + 300, // Duration + function() { // Callback when the animation is finished + console.log( "done!" ); + } }); ``` -
-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'll discuss using plugins later in the book. -
### Easing Definition: Easing describes the manner in which an effect occurs — 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 `$.fn.animate` method. ``` -// Per-property easing"> -$("div.funtimes").animate({ - left: [ "+=50", "swing" ], - opacity: [ 0.25, "linear" ] +// Per-property easing +$( "div.funtimes" ).animate({ + left: [ "+=50", "swing" ], + opacity: [ 0.25, "linear" ] }, 300 ); ``` diff --git a/page/effects/intro-to-effects.md b/page/effects/intro-to-effects.md index a04cf3fc..d5b66f4f 100644 --- a/page/effects/intro-to-effects.md +++ b/page/effects/intro-to-effects.md @@ -9,36 +9,36 @@ jQuery can show or hide content instantaneously with `$.fn.show` or `$.fn.hide`: ``` // Instantaneously hide all paragraphs -$("p").hide(); +$( "p" ).hide(); // Instantaneously show all divs that have the hidden style class -$("div.hidden").show(); +$( "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`: ``` // Slowly hide all paragraphs -$("p").hide("slow"); +$( "p" ).hide( "slow" ); // Quickly show all divs that have the hidden style class -$("div.hidden").show("fast"); +$( "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`: ``` // Hide all paragraphs over half a second -$("p").hide( 500 ); +$( "p" ).hide( 500 ); // Show all divs that have the hidden style class over 1.25 seconds -$("div.hidden").show( 1250 ); +$( "div.hidden" ).show( 1250 ); ``` Most developers pass in a number of milliseconds to have more precise control @@ -46,104 +46,104 @@ 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 +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. ``` // Hide all paragraphs using a slide up animation over 0.8 seconds -$("p").slideUp( 800 ); +$( "p" ).slideUp( 800 ); // Show all hidden divs using a slide down animation over 0.6 seconds -$("div.hidden").slideDown( 600 ); -``` +$( "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's CSS `opacity` property. ``` // Hide all paragraphs using a fade out animation over 1.5 seconds -$("p").fadeOut( 1500 ); +$( "p" ).fadeOut( 1500 ); // Show all hidden divs using a fade in animation over 0.75 seconds -$("div.hidden").fadeIn( 750 ); -``` +$( "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'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. ``` // Instantaneously toggle the display of all paragraphs -$("p").toggle(); +$( "p" ).toggle(); // Slowly toggle the display of all images -$("img").toggle("slow"); +$( "img" ).toggle( "slow" ); // Toggle the display of all divs over 1.8 seconds -$("div").toggle( 1800 ); +$( "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`. ``` // Toggle the display of all ordered lists over 1 second using slide up/down animations -$("ol").slideToggle( 1000 ); +$( "ol" ).slideToggle( 1000 ); // Toggle the display of all blockquotes over 0.4 seconds using fade in/out animations -$("blockquote").fadeToggle( 400 ); +$( "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"); +$( "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) -$("p.hidden").fadeIn( 750, function(){ - // this = DOM element which has just finished being animated - $( this ).addClass("lookAtMe"); +$( "p.hidden" ).fadeIn( 750, function() { + // this = DOM element which has just finished being animated + $( this ).addClass( "lookAtMe" ); }); ``` -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. ``` // Run a callback even if there were no elements to animate -var $someElement = $("#nonexistent"); +var $someElement = $( "#nonexistent" ); var cb = function() { - console.log("done!"); + console.log( "done!" ); }; if ( $someElement.length ) { - $someElement.fadeIn( 300, cb ); + $someElement.fadeIn( 300, cb ); } else { - cb(); + cb(); } ``` @@ -153,41 +153,40 @@ 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. ``` // Create a button to stop all animations on the page: -$("input").attr({ - type: "button", - value: "Stop All Animations" +$( "input" ).attr({ + type: "button", + value: "Stop All Animations" }).on( "click", function() { - $("body *").filter(":animated").stop(); + $( "body *" ).filter( ":animated" ).stop(); }).appendTo( document.body ); ``` ### `$.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 +// Hide all level 1 headings over half a second; then wait for 1.5 seconds // and reveal all level 1 headings over 0.3 seconds -$("h1").hide( 500 ).delay( 1500 ).show( 300 ); +$( "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: ``` { - slow: 600, - fast: 200, - // Default speed, used for "normal" - _default: 400 + slow: 600, + fast: 200, + _default: 400 // Default speed, used for "normal" } ``` @@ -199,23 +198,23 @@ 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. ``` -$("input").attr({ - type : "button", - value : "Disable Animations" -}).on( "click", function(){ - jQuery.fx.off = true; +$( "input" ).attr({ + type: "button", + value: "Disable Animations" +}).on( "click", function() { + jQuery.fx.off = true; }).appendTo( document.body ); ``` diff --git a/page/effects/queue-and-dequeue-explained.md b/page/effects/queue-and-dequeue-explained.md index a5c155f4..aaa95f2b 100644 --- a/page/effects/queue-and-dequeue-explained.md +++ b/page/effects/queue-and-dequeue-explained.md @@ -4,64 +4,55 @@ level: advanced source: http://jqueryfordesigners.com/api-queue-dequeue/ --- -When you use the animate and show, hide, slideUp, etc effect methods, you’re -adding a job on to the fx queue. By default, using queue and passing a function, -will add to the fx queue. So we’re creating our own bespoke animation step: +When you use the `animate`, and `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: ``` -$(".box").animate({ - height : 20 +$( ".box" ).animate({ + height: 20 }, "slow" ).queue(function() { - - $("#title").html("We're in the animation, baby!"); - + $( "#title" ).html( "We're in the animation, baby!" ); }); ``` -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 wouldn’t run: +animations wouldn't run: ``` -$(".box").animate({ - height : 20 +$( ".box" ).animate({ + height: 20 }, "slow" ).queue(function() { - - $("#title").html("We're in the animation, baby!"); - - $( this ).dequeue(); - + $( "#title" ).html( "We're in the animation, baby!" ); + $( this ).dequeue(); }).animate({ - height: 150 + 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 n milliseconds, at which time, it dequeues +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 `n` milliseconds, at which time, it dequeues the element: ``` $.fn.pause = function( n ) { - - return this.queue(function() { - - var el = this; - setTimeout( function() { - return $( el ).dequeue(); - }, n ); - }); - + return this.queue(function() { + var el = this; + setTimeout(function() { + return $( el ).dequeue(); + }, n ); + }); }; -$(".box").animate({ - height : 20 +$( ".box" ).animate({ + height: 20 }, "slow" ).pause( 1000 ).animate({ - height: 150 + height: 150 }); ``` - -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'm not including it because jQuery sets the argument to `fx` by default — so I don't have to specify it. diff --git a/page/effects/uses-of-queue-and-dequeue.md b/page/effects/uses-of-queue-and-dequeue.md index f19fdc93..80a51619 100644 --- a/page/effects/uses-of-queue-and-dequeue.md +++ b/page/effects/uses-of-queue-and-dequeue.md @@ -6,75 +6,73 @@ 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 I’ve seen is `.delay()`: +queue function I've seen is `.delay()`: ``` $.fn.delay = function( time, type ) { - time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; + time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time; - type = type || "fx"; + type = type || "fx"; - return this.queue( type, function() { + return this.queue( type, function() { - var elem = this; + var elem = this; - setTimeout(function() { + setTimeout(function() { - jQuery.dequeue( elem, type ); + jQuery.dequeue( elem, type ); - }, time ); + }, time ); - }); + }); }; ``` ## 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 hasn’t +- 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, +- “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 + “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. -
-If you are using a custom queue, you must manually `.dequeue()` the functions, they will not auto start! -
+**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. ## Quick Examples: ``` -// lets assume $elem is a jQuery object that points to some element we are animating. +// Let's assume $elem is a jQuery object that points to some element we are animating. var queue = $elem.queue(); -// remove the last function from the animation queue. +// Remove the last function from the animation queue. var lastFunc = queue.pop(); -// insert it at the beginning: +// Insert it at the beginning: queue.unshift( lastFunc ); -// replace queue with the first three items in the queue +// Replace queue with the first three items in the queue. $elem.queue( queue.slice( 0, 3 ) ); ``` @@ -82,141 +80,115 @@ $elem.queue( queue.slice( 0, 3 ) ); ``` $(function() { - - // lets do something with google maps: - var $map = $("#map_canvas"); - - var myLatlng = new google.maps.LatLng( -34.397, 150.644 ); - - var myOptions = { - zoom: 8, - center: myLatlng, - mapTypeId: google.maps.MapTypeId.ROADMAP - }; - - var geocoder = new google.maps.Geocoder(); - - var map = new google.maps.Map( $map[0], myOptions ); - - var resized = function() { - - // simple animation callback - let maps know we resized - google.maps.event.trigger( map, "resize" ); - - }; - - // wait 2 seconds - $map.delay( 2000 ); - - // resize the div: - $map.animate({ - width: 250, - height: 250, - marginLeft: 250, - marginTop:250 - }, resized ); - - // geocode something - $map.queue(function( next ) { - - // find stackoverflow'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 - $map.delay( 3000 ); - - // and resize the map again - $map.animate({ - width: 500, - height: 500, - marginLeft:0, - marginTop: 0 - }, resized ); + // Let's do something with Google Maps: + var $map = $( "#map_canvas" ); + + var myLatlng = new google.maps.LatLng( -34.397, 150.644 ); + + var myOptions = { + zoom: 8, + center: myLatlng, + mapTypeId: google.maps.MapTypeId.ROADMAP + }; + + var geocoder = new google.maps.Geocoder(); + + var map = new google.maps.Map( $map[0], myOptions ); + + var resized = function() { + // simple animation callback - let maps know we resized + google.maps.event.trigger( map, "resize" ); + }; + + $map.delay( 2000 ); // Wait for two seconds. + + // resize the div: + $map.animate({ + width: 250, + height: 250, + marginLeft: 250, + marginTop:250 + }, resized ); + + // geocode something + $map.queue(function( next ) { + // find stackoverflow'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 + $map.delay( 3000 ); + + // and resize the map again + $map.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 +// 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 fire the next event in the queue - ajaxOpts.complete = function() { - - // fire 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 ); - - }); - + // Hold the original complete function. + var oldComplete = ajaxOpts.complete; + + // Queue our ajax request. + ajaxQueue.queue(function( next ) { + // Create a complete callback to fire the next event in the queue. + ajaxOpts.complete = function() { + // Fire 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 - })); - - } - }); - +// 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 + })); + } + }); }); ``` @@ -225,39 +197,29 @@ $("#items li").each(function( idx ) { ``` var theQueue = $({}); // jQuery on an empty object - a perfect queue holder -$.each( [1,2,3], function( i, num ) { - - // lets add some really simple functions to a queue: - theQueue.queue( "alerts", function(next) { - - // show something, and if they hit "yes", run the next function. - if ( confirm("index:" + i + " = " + num + "\nRun the next function?") ) { - - next(); - - } - - }); - +$.each([ 1, 2, 3 ], function( i, num ) { + // Let's add some really simple functions to a queue: + theQueue.queue( "alerts", function( next ) { + // Show something, and if they hit "yes", run the next function. + if ( confirm( "index: " + i + " = " + num + "\nRun the next function?" ) ) { + next(); + } + }); }); -// create a button to run the queue: -$("