Skip to content

Commit f419b87

Browse files
Markus Amalthea Magnusonajpiano
Markus Amalthea Magnuson
authored and
ajpiano
committed
Style and typography fixes, and code style adherence in the Effects section. Fixes jquery#290.
1 parent bb154e5 commit f419b87

File tree

5 files changed

+264
-316
lines changed

5 files changed

+264
-316
lines changed

‎page/effects.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ customFields:
66
key: "icon"
77
value: "picture"
88
---
9-
jQuery makes it trivial to add simple effects to your page. Effects can use
10-
the built-in settings, or provide a customized duration. You can also create
9+
jQuery makes it trivial to add simple effects to your page. Effects can use
10+
the built-in settings, or provide a customized duration. You can also create
1111
custom animations of arbitrary CSS properties.
1212

1313
For complete details on jQuery effects, visit the

‎page/effects/custom-effects.md

+19-23
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,46 @@
22
title : Custom Effects with $.fn.animate
33
level: beginner
44
source: http://jqfundamentals.com/legacy
5-
attribution:
5+
attribution:
66
- jQuery Fundamentals
77
---
88
jQuery makes it possible to animate arbitrary CSS properties via the
9-
`$.fn.animate` method. The `$.fn.animate` method lets you animate to a set
9+
`$.fn.animate` method. The `$.fn.animate` method lets you animate to a set
1010
value, or to a value relative to the current value.
1111

1212
```
13-
// Custom effects with `$.fn.animate`">
14-
$("div.funtimes").animate({
15-
left : "+=50",
16-
opacity : 0.25
17-
},
18-
// duration:
19-
300,
20-
// callback:
21-
function() {
22-
console.log("done!");
23-
}
13+
// Custom effects with $.fn.animate
14+
$( "div.funtimes" ).animate({
15+
left: "+=50",
16+
opacity: 0.25
17+
},
18+
300, // Duration
19+
function() { // Callback when the animation is finished
20+
console.log( "done!" );
21+
}
2422
});
2523
```
2624

27-
<div class="note">
28-
Color-related properties cannot be animated with `$.fn.animate` using jQuery
29-
out of the box. Color animations can easily be accomplished by including the
30-
[color plugin](http://github.com/jquery/jquery-color). We'll discuss using
25+
**Note:** Color-related properties cannot be animated with `$.fn.animate` using jQuery
26+
out of the box. Color animations can easily be accomplished by including the
27+
[color plugin](http://github.com/jquery/jquery-color). We'll discuss using
3128
plugins later in the book.
32-
</div>
3329

3430
### Easing
3531

3632
Definition: Easing describes the manner in which an effect occurs — whether
3733
the rate of change is steady, or varies over the duration of the animation.
38-
jQuery includes only two methods of easing: swing and linear. If you want more
34+
jQuery includes only two methods of easing: swing and linear. If you want more
3935
natural transitions in your animations, various easing plugins are available.
4036

4137
As of jQuery 1.4, it is possible to do per-property easing when using the
4238
`$.fn.animate` method.
4339

4440
```
45-
// Per-property easing">
46-
$("div.funtimes").animate({
47-
left: [ "+=50", "swing" ],
48-
opacity: [ 0.25, "linear" ]
41+
// Per-property easing
42+
$( "div.funtimes" ).animate({
43+
left: [ "+=50", "swing" ],
44+
opacity: [ 0.25, "linear" ]
4945
}, 300 );
5046
```
5147

‎page/effects/intro-to-effects.md

+73-74
Original file line numberDiff line numberDiff line change
@@ -9,141 +9,141 @@ jQuery can show or hide content instantaneously with `$.fn.show` or `$.fn.hide`:
99

1010
```
1111
// Instantaneously hide all paragraphs
12-
$("p").hide();
12+
$( "p" ).hide();
1313
1414
// Instantaneously show all divs that have the hidden style class
15-
$("div.hidden").show();
15+
$( "div.hidden" ).show();
1616
```
1717

18-
When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have
18+
When jQuery hides an element, it sets its CSS `display` property to `none`. This means the content will have
1919
zero width and height; it does not mean that the content will simply become transparent and leave an empty area on the page.
2020

21-
jQuery can also show or hide content by means of animation effects. You can tell
22-
`$.fn.show` and `$.fn.hide` to use animation in a couple of ways. One is to pass
21+
jQuery can also show or hide content by means of animation effects. You can tell
22+
`$.fn.show` and `$.fn.hide` to use animation in a couple of ways. One is to pass
2323
in a string-valued argument of `slow`, `normal`, or `fast`:
2424

2525
```
2626
// Slowly hide all paragraphs
27-
$("p").hide("slow");
27+
$( "p" ).hide( "slow" );
2828
2929
// Quickly show all divs that have the hidden style class
30-
$("div.hidden").show("fast");
30+
$( "div.hidden" ).show( "fast" );
3131
```
3232

33-
If you prefer more direct control over the duration of the animation effect, you
33+
If you prefer more direct control over the duration of the animation effect, you
3434
can pass the desired duration in milliseconds to `$.fn.show` and `$.fn.hide`:
3535

3636
```
3737
// Hide all paragraphs over half a second
38-
$("p").hide( 500 );
38+
$( "p" ).hide( 500 );
3939
4040
// Show all divs that have the hidden style class over 1.25 seconds
41-
$("div.hidden").show( 1250 );
41+
$( "div.hidden" ).show( 1250 );
4242
```
4343

4444
Most developers pass in a number of milliseconds to have more precise control
4545
over the duration.
4646

4747
##Fade and Slide Animations
4848

49-
You may have noticed that `$.fn.show` and `$.fn.hide` use a combination of slide and fade effects
50-
when showing and hiding content in an animated way. If you would rather show or hide content with
51-
one effect or the other, there are additional methods that can help. `$.fn.slideDown` and `$.fn.slideUp`
52-
show and hide content, respectively, using only a slide effect. Slide animations are accomplished by
49+
You may have noticed that `$.fn.show` and `$.fn.hide` use a combination of slide and fade effects
50+
when showing and hiding content in an animated way. If you would rather show or hide content with
51+
one effect or the other, there are additional methods that can help. `$.fn.slideDown` and `$.fn.slideUp`
52+
show and hide content, respectively, using only a slide effect. Slide animations are accomplished by
5353
rapidly making changes to an element's CSS `height` property.
5454

5555
```
5656
// Hide all paragraphs using a slide up animation over 0.8 seconds
57-
$("p").slideUp( 800 );
57+
$( "p" ).slideUp( 800 );
5858
5959
// Show all hidden divs using a slide down animation over 0.6 seconds
60-
$("div.hidden").slideDown( 600 );
61-
```
60+
$( "div.hidden" ).slideDown( 600 );
61+
```
6262

63-
Similarly `$.fn.fadeIn` and `$.fn.fadeOut` show and hide content, respectively, by means of a fade
64-
animation. Fade animations involve rapidly making changes to an element's CSS `opacity` property.
63+
Similarly `$.fn.fadeIn` and `$.fn.fadeOut` show and hide content, respectively, by means of a fade
64+
animation. Fade animations involve rapidly making changes to an element's CSS `opacity` property.
6565

6666
```
6767
// Hide all paragraphs using a fade out animation over 1.5 seconds
68-
$("p").fadeOut( 1500 );
68+
$( "p" ).fadeOut( 1500 );
6969
7070
// Show all hidden divs using a fade in animation over 0.75 seconds
71-
$("div.hidden").fadeIn( 750 );
72-
```
71+
$( "div.hidden" ).fadeIn( 750 );
72+
```
7373

7474
##Changing Display Based on Current Visibility State
7575

76-
jQuery can also let you change a content's visibility based on its current visibility state. `$.fn.toggle`
77-
will show content that is currently hidden and hide content that is currently visible. You can pass the
76+
jQuery can also let you change a content's visibility based on its current visibility state. `$.fn.toggle`
77+
will show content that is currently hidden and hide content that is currently visible. You can pass the
7878
same arguments to `$.fn.toggle` as you pass to any of the effects methods above.
7979

8080
```
8181
// Instantaneously toggle the display of all paragraphs
82-
$("p").toggle();
82+
$( "p" ).toggle();
8383
8484
// Slowly toggle the display of all images
85-
$("img").toggle("slow");
85+
$( "img" ).toggle( "slow" );
8686
8787
// Toggle the display of all divs over 1.8 seconds
88-
$("div").toggle( 1800 );
88+
$( "div" ).toggle( 1800 );
8989
```
9090

91-
`$.fn.toggle` will use a combination of slide and fade effects, just as `$.fn.show` and `$.fn.hide` do. You can
91+
`$.fn.toggle` will use a combination of slide and fade effects, just as `$.fn.show` and `$.fn.hide` do. You can
9292
toggle the display of content with just a slide or a fade using `$.fn.slideToggle` and `$.fn.fadeToggle`.
9393

9494
```
9595
// Toggle the display of all ordered lists over 1 second using slide up/down animations
96-
$("ol").slideToggle( 1000 );
96+
$( "ol" ).slideToggle( 1000 );
9797
9898
// Toggle the display of all blockquotes over 0.4 seconds using fade in/out animations
99-
$("blockquote").fadeToggle( 400 );
99+
$( "blockquote" ).fadeToggle( 400 );
100100
```
101101

102102
##Doing Something After an Animation Completes
103103

104104
A common mistake when implementing jQuery effects is assuming that the execution of the next method in your
105-
chain will wait until the animation runs to completion.
105+
chain will wait until the animation runs to completion.
106106

107107
```
108108
// Fade in all hidden paragraphs; then add a style class to them (not quite right)
109-
$("p.hidden").fadeIn( 750 ).addClass("lookAtMe");
109+
$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );
110110
```
111111

112-
It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the
113-
animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When
114-
you call `$.fn.fadeIn`, it starts the animation loop and then returns the jQuery object, passing it along
115-
to `$.fn.addClass` which will then add the `lookAtMe` style class while the animation loop is just
112+
It is important to realize that `$.fn.fadeIn` above only *kicks off* the animation. Once started, the
113+
animation is implemented by rapidly changing CSS properties in a JavaScript `setInterval()` loop. When
114+
you call `$.fn.fadeIn`, it starts the animation loop and then returns the jQuery object, passing it along
115+
to `$.fn.addClass` which will then add the `lookAtMe` style class while the animation loop is just
116116
getting started.
117117

118118
To defer an action until after an animation has run to completion, you need to use an animation callback
119-
function. You can specify your animation callback as the second argument passed to any of the
120-
animation methods discussed above. For the code snippet above, we can implement a callback as follows:
119+
function. You can specify your animation callback as the second argument passed to any of the
120+
animation methods discussed above. For the code snippet above, we can implement a callback as follows:
121121

122122
```
123123
// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback)
124-
$("p.hidden").fadeIn( 750, function(){
125-
// this = DOM element which has just finished being animated
126-
$( this ).addClass("lookAtMe");
124+
$( "p.hidden" ).fadeIn( 750, function() {
125+
// this = DOM element which has just finished being animated
126+
$( this ).addClass( "lookAtMe" );
127127
});
128128
```
129129

130-
Note that you can use the keyword `this` to refer to the DOM element being animated. Also note
131-
that the callback will be called for each element in the jQuery object. This means that if your
132-
selector returns no elements, your animation callback will never run! You can solve this problem by
130+
Note that you can use the keyword `this` to refer to the DOM element being animated. Also note
131+
that the callback will be called for each element in the jQuery object. This means that if your
132+
selector returns no elements, your animation callback will never run! You can solve this problem by
133133
testing whether your selection returned any elements; if not, you can just run the callback immediately.
134134

135135
```
136136
// Run a callback even if there were no elements to animate
137-
var $someElement = $("#nonexistent");
137+
var $someElement = $( "#nonexistent" );
138138
139139
var cb = function() {
140-
console.log("done!");
140+
console.log( "done!" );
141141
};
142142
143143
if ( $someElement.length ) {
144-
$someElement.fadeIn( 300, cb );
144+
$someElement.fadeIn( 300, cb );
145145
} else {
146-
cb();
146+
cb();
147147
}
148148
```
149149

@@ -153,41 +153,40 @@ jQuery provides some additional features for controlling your animations:
153153

154154
### `$.fn.stop`
155155

156-
`$.fn.stop` will immediately terminate all animations running on the elements in your selection. You might give
156+
`$.fn.stop` will immediately terminate all animations running on the elements in your selection. You might give
157157
end-users control over page animations by rigging a button they can click to stop the animations.
158158

159159
```
160160
// Create a button to stop all animations on the page:
161-
$("input").attr({
162-
type: "button",
163-
value: "Stop All Animations"
161+
$( "input" ).attr({
162+
type: "button",
163+
value: "Stop All Animations"
164164
}).on( "click", function() {
165-
$("body *").filter(":animated").stop();
165+
$( "body *" ).filter( ":animated" ).stop();
166166
}).appendTo( document.body );
167167
```
168168

169169
### `$.fn.delay`
170170

171-
`$.fn.delay` is used to introduce a delay between successive animations. For example:
171+
`$.fn.delay` is used to introduce a delay between successive animations. For example:
172172

173173
```
174-
// Hide all level 1 headings over half a second; then wait for 1.5 seconds
174+
// Hide all level 1 headings over half a second; then wait for 1.5 seconds
175175
// and reveal all level 1 headings over 0.3 seconds
176-
$("h1").hide( 500 ).delay( 1500 ).show( 300 );
176+
$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );
177177
```
178178

179179
### `jQuery.fx`
180180

181-
The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps
182-
the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific
183-
number of milliseconds. The default value of `jQuery.fx.speeds` is:
181+
The `jQuery.fx` object has a number of properties that control how effects are implemented. `jQuery.fx.speeds` maps
182+
the `slow`, `normal`, and `fast` duration arguments mentioned above to a specific
183+
number of milliseconds. The default value of `jQuery.fx.speeds` is:
184184

185185
```
186186
{
187-
slow: 600,
188-
fast: 200,
189-
// Default speed, used for "normal"
190-
_default: 400
187+
slow: 600,
188+
fast: 200,
189+
_default: 400 // Default speed, used for "normal"
191190
}
192191
```
193192

@@ -199,23 +198,23 @@ jQuery.fx.speeds.blazing = 100;
199198
jQuery.fx.speeds.excruciating = 60000;
200199
```
201200

202-
`jQuery.fx.interval` controls the number of frames per second that are
203-
displayed in an animation. The default value is 13 milliseconds between
204-
successive frames. You can set this a lower value for faster browsers
205-
to make the animations run smoother. However this will mean more frames
206-
per second and thus a higher computational load for the browser, so you
201+
`jQuery.fx.interval` controls the number of frames per second that is
202+
displayed in an animation. The default value is 13 milliseconds between
203+
successive frames. You can set this to a lower value for faster browsers
204+
to make the animations run smoother. However this will mean more frames
205+
per second and thus a higher computational load for the browser, so you
207206
should be sure to test the performance implications of doing so thoroughly.
208207

209208
Finally, `jQuery.fx.off` can be set to true to disable all animations. Elements
210-
will immediately be set to the target final state instead. This can be
209+
will immediately be set to the target final state instead. This can be
211210
especially useful when dealing with older browsers; you also may want to
212211
provide the option to disable all animations to your users.
213212

214213
```
215-
$("input").attr({
216-
type : "button",
217-
value : "Disable Animations"
218-
}).on( "click", function(){
219-
jQuery.fx.off = true;
214+
$( "input" ).attr({
215+
type: "button",
216+
value: "Disable Animations"
217+
}).on( "click", function() {
218+
jQuery.fx.off = true;
220219
}).appendTo( document.body );
221220
```

0 commit comments

Comments
 (0)