Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Style and typography fixes, and code style adherence in the Effects section. #290

Closed
wants to merge 3 commits into
from
Jump to file or symbol
Failed to load files and symbols.
+264 −316
Split
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.