Skip to content

Commit

Permalink
Style and typography fixes, and code style adherence in the Effects s…
Browse files Browse the repository at this point in the history 
…ection. Fixes #290.
  • Loading branch information
@ajpiano
Markus Amalthea Magnuson authored and ajpiano committed Mar 14, 2013
1 parent 65bbfb2 commit 58ac547
Show file tree
Hide file tree
Showing 5 changed files with 264 additions and 316 deletions.
4 changes: 2 additions & 2 deletions page/effects.md
View file
Expand Up @@ -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
Expand Down
42 changes: 19 additions & 23 deletions page/effects/custom-effects.md
View file
Expand Up @@ -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 );
```

Expand Down
147 changes: 73 additions & 74 deletions page/effects/intro-to-effects.md
View file
Expand Up @@ -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();
}
```

Expand All @@ -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"
}
```

Expand All @@ -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 );
```

0 comments on commit 58ac547

Please sign in to comment.