Skip to content

Commit 39c68f9

Browse files
danheberdendanheberden
committed
Add effects chapter
1 parent 8068347 commit 39c68f9

File tree

5 files changed

+240
-0
lines changed

5 files changed

+240
-0
lines changed

‎content/jquery-fundamentals/effects/built-in-effects.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
chapter : effects
3+
section : 2
4+
title : Built-in Effects
5+
attribution: jQuery Fundamentals
6+
---
7+
## Built-in Effects
8+
9+
Frequently used effects are built into jQuery as methods:
10+
11+
#### $.fn.show
12+
Show the selected element.
13+
14+
#### $.fn.hide
15+
Hide the selected elements.
16+
17+
#### $.fn.fadeIn
18+
Animate the opacity of the selected elements to 100%.
19+
20+
#### $.fn.fadeOut
21+
Animate the opacity of the selected elements to 0%.
22+
23+
#### $.fn.slideDown
24+
Display the selected elements with a vertical sliding motion.
25+
26+
#### $.fn.slideUp
27+
Hide the selected elements with a vertical sliding motion.
28+
29+
#### $.fn.slideToggle
30+
Show or hide the selected elements with a vertical sliding motion, depending on whether the elements are currently visible.
31+
32+
<div class="example" markdown="1">
33+
A basic use of a built-in effect
34+
35+
$('h1').show();
36+
</div>
37+
38+
### Changing the Duration of Built-in Effects
39+
40+
With the exception of `$.fn.show` and `$.fn.hide`, all of the built-in methods are animated over the course of 400ms by default. Changing the duration of an effect is simple.
41+
42+
<div class="example" markdown="1">
43+
Setting the duration of an effect
44+
45+
$('h1').fadeIn(300); // fade in over 300ms
46+
$('h1').fadeOut('slow'); // using a built-in speed definition
47+
<div class="example" markdown="1">
48+
49+
### jQuery.fx.speeds
50+
51+
jQuery has an object at `jQuery.fx.speeds` that contains the default speed, as well as settings for "`slow`" and "`fast`".
52+
53+
<div class="example" markdown="1">
54+
speeds: {
55+
slow: 600,
56+
fast: 200,
57+
// Default speed
58+
_default: 400
59+
}
60+
</div>
61+
62+
It is possible to override or add to this object.
63+
For example, you may want to change the default duration of effects, or you may want to create your own effects speed.
64+
65+
<div class="example" markdown="1">
66+
Augmenting `jQuery.fx.speeds` with custom speed definitions
67+
68+
jQuery.fx.speeds.blazing = 100;
69+
jQuery.fx.speeds.turtle = 2000;
70+
</div>
71+
72+
### Doing Something when an Effect is Done
73+
74+
Often, you'll want to run some code once an animation is done.
75+
If you run it before the animation is done, it may affect the quality of the animation, or it may remove elements that are part of the animation.
76+
[Definition: Callback functions provide a way to register your interest in an event that will happen in the future.]
77+
In this case, the event we'll be responding to is the conclusion of the animation.
78+
Inside of the callback function, the keyword this refers to the element that the effect was called on; as we did inside of event handler functions, we can turn it into a jQuery object via $(this).
79+
80+
<div class="example" markdown="1">
81+
Running code when an animation is complete
82+
83+
$('div.old').fadeOut(300, function() { $(this).remove(); });
84+
</div>
85+
86+
Note that if your selection doesn't return any elements, your callback will never run!
87+
You can solve this problem by testing whether your selection returned any elements; if not, you can just run the callback immediately.
88+
89+
<div class="example" markdown="1">
90+
Run a callback even if there were no elements to animate
91+
92+
var $thing = $('#nonexistent');
93+
94+
var cb = function() {
95+
console.log('done!');
96+
};
97+
98+
if ($thing.length) {
99+
$thing.fadeIn(300, cb);
100+
} else {
101+
cb();
102+
}
103+
</div>

‎content/jquery-fundamentals/effects/custom-effects.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
chapter : effects
3+
section : 3
4+
title : Custom Effects with $.fn.animate
5+
attribution: jQuery Fundamentals
6+
---
7+
## Custom Effects with `$.fn.animate`
8+
9+
jQuery makes it possible to animate arbitrary CSS properties via the `$.fn.animate` method.
10+
The `$.fn.animate` method lets you animate to a set value, or to a value relative to the current value.
11+
12+
<div class="example" markdown="1">
13+
Custom effects with `$.fn.animate`
14+
15+
$('div.funtimes').animate(
16+
{
17+
left : "+=50",
18+
opacity : 0.25
19+
},
20+
300, // duration
21+
function() { console.log('done!'); // calback
22+
});
23+
</div>
24+
25+
<div class="example" markdown="1">
26+
### Note
27+
28+
Color-related properties cannot be animated with `$.fn.animate` using jQuery out of the box.
29+
Color animations can easily be accomplished by including the [color plugin](http://github.com/jquery/jquery-color).
30+
We'll discuss using plugins later in the book.
31+
</div>
32+
33+
### Easing
34+
35+
[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.]
36+
jQuery includes only two methods of easing: swing and linear.
37+
If you want more natural transitions in your animations, various easing plugins are available.
38+
39+
As of jQuery 1.4, it is possible to do per-property easing when using the `$.fn.animate` method.
40+
41+
<div class="example" markdown="1">
42+
Per-property easing
43+
44+
$('div.funtimes').animate(
45+
{
46+
left : [ "+=50", "swing" ],
47+
opacity : [ 0.25, "linear" ]
48+
},
49+
300
50+
);
51+
</div>
52+
53+
For more details on easing options, see [http://api.jquery.com/animate/](http://api.jquery.com/animate/ "Animation documentation on api.jquery.com").

‎content/jquery-fundamentals/effects/effects-exercises.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
chapter : effects
3+
section : 5
4+
title : Effect Exercises
5+
attribution: jQuery Fundamentals
6+
---
7+
## Exercises
8+
9+
### Reveal Hidden Text
10+
11+
Open the file `/exercises/index.html` in your browser.
12+
Use the file `/exercises/js/blog.js`.
13+
Your task is to add some interactivity to the blog section of the page.
14+
The spec for the feature is as follows:
15+
16+
* Clicking on a headline in the #blog div should slide down the excerpt paragraph
17+
18+
* Clicking on another headline should slide down its excerpt paragraph, and slide up any other currently showing excerpt paragraphs.
19+
20+
Hint: don't forget about the `:visible` selector!
21+
22+
### Create Dropdown Menus
23+
24+
Open the file `/exercises/index.html` in your browser.
25+
Use the file `/exercises/js/navigation.js`.
26+
Your task is to add dropdowns to the main navigation at the top of the page.
27+
28+
* Hovering over an item in the main menu should show that item's submenu items, if any.
29+
30+
* Exiting an item should hide any submenu items.
31+
32+
To accomplish this, use the `$.fn.hover` method to add and remove a class from the submenu items to control whether they're visible or hidden.
33+
(The file at `/exercises/css/styles.cs`s includes the "hover" class for this purpose.)
34+
35+
### Create a Slideshow
36+
37+
Open the file `/exercises/index.html` in your browser.
38+
Use the file `/exercises/js/slideshow.js`.
39+
Your task is to take a plain semantic HTML page and enhance it with JavaScript by adding a slideshow.
40+
41+
1. Move the #slideshow element to the top of the body.
42+
43+
2. Write code to cycle through the list items inside the element; fade one in, display it for a few seconds, then fade it out and fade in the next one.
44+
45+
3. When you get to the end of the list, start again at the beginning.
46+
47+
For an extra challenge, create a navigation area under the slideshow that shows how many images there are and which image you're currently viewing.
48+
(Hint: `$.fn.prevAll` will come in handy for this.)

‎content/jquery-fundamentals/effects/effects-overview.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
chapter : effects
3+
section : 1
4+
title : Overview
5+
attribution: jQuery Fundamentals
6+
---
7+
## Overview
8+
9+
jQuery makes it trivial to add simple effects to your page.
10+
Effects can use the built-in settings, or provide a customized duration.
11+
You can also create custom animations of arbitrary CSS properties.
12+
13+
For complete details on jQuery effects, visit [http://api.jquery.com/category/effects/](http://api.jquery.com/category/effects/ "Effects documentation on api.juqery.com").

‎content/jquery-fundamentals/effects/managing-effects.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
chapter : effects
3+
section : 4
4+
title : Managing Effects
5+
attribution: jQuery Fundamentals
6+
---
7+
## Managing Effects
8+
9+
jQuery provides several tools for managing animations.
10+
11+
### `$.fn.stop`
12+
Stop currently running animations on the selected elements.
13+
14+
### `$.fn.delay`
15+
Wait the specified number of milliseconds before running the next animation.
16+
17+
<div class="example" markdown="1">
18+
$('h1').show(300).delay(1000).hide(300);
19+
</div>
20+
21+
### `jQuery.fx.off`
22+
If this value is true, there will be no transition for animations; elements will immediately be set to the target final state instead.
23+
This can be especially useful when dealing with older browsers; you also may want to provide the option to your users.

0 commit comments

Comments
 (0)