Permalink
Browse files

Style and typography fixes, and code style adherence in the Effects s…

…ection. Fixes #290.
  • Loading branch information...
1 parent 65bbfb2 commit 58ac547bfc533562a3885b4fe9f2a0ba60dd3aac @alimony alimony committed with ajpiano Mar 14, 2013
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
@@ -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!" );
+ }
});
```
-<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'll discuss using
plugins later in the book.
-</div>
### 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 );
```
@@ -9,141 +9,141 @@ 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
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 );
```
Oops, something went wrong.

0 comments on commit 58ac547

Please sign in to comment.