"Java Objects (Retired)" was retired on January 31, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
Create simple, fun animation sequences with jQuery!
Further Reading
- jQuery Docs: Animation Effects
- Method chaining
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
jQuery offers many methods that can
help you easily manipulate the DOM.
0:00
Manipulating DOM elements can include
adjusting an element's visibility
0:04
as we've already seen with the hide
method, as well as adding, deleting, or
0:08
modifying the contents or attributes of an
element and changing an element's styling.
0:12
One area where jQuery
really shines is animation.
0:17
There are several built-in methods that
allow you to use fun animations when you
0:20
add, remove, or
reveal elements on a webpage.
0:24
There's fadeIn and
Out which changes the opacity over time.
0:27
You can literally see through the element
as it disappears or comes into view.
0:31
slideDown() and slideUp() reveal
an element with a sliding motion.
0:35
There's even a method called delay()
which lets you add a delay between two
0:40
animations.
0:43
For our first jQuery project,
0:45
we'll use a few of these methods
to build a simple blog previewer
0:46
with a flash message that appears
when the PREVIEW button is pressed.
0:50
We won't actually be
building a functioning blog.
0:54
That would require back end programming,
a database to store blog entries, and
0:57
a lot of complex functionality
like user accounts
1:02
that are beyond the scope of this course.
1:05
Our project will simply allow the user to
preview what their blog entry will look
1:07
like and
let them know the changes have been saved.
1:11
Think of it as a prototype or
1:14
demonstration of a feature you'd add
to a larger, more complex project.
1:16
In this video,
1:20
we'll create a flash message to learn
about animation methods in more detail and
1:21
see how they can be used together
to create some pretty cool effects.
1:25
A flash message is designed to show
a temporary message like a warning,
1:29
confirmation, or alert to a user.
1:33
Since the message is only
a temporary notification,
1:36
we wanna show it when the page loads
then hide it after a few seconds delay.
1:39
Later, we'll program the message so
1:44
that it only displays once a user
clicks this PREVIEW button.
1:45
But for now, the message and animation
will show each time the page is refreshed.
1:50
Firstly, open up the workspace with
this video to follow along with me.
1:54
If you'd rather work with your own text
editor, you can download the files for
1:58
this course below.
2:02
Here we have got an index.html file,
an app.js file, and
2:03
a CSS folder,
which we won't be doing anything with but
2:07
it's providing some styles to make
the blog previewer page look nice.
2:11
I've already included the file
you'll need to use jQuery as well.
2:17
Once again,
2:20
I will show you how you can add jQuery to
your own projects later on in this course.
2:21
Go ahead and go to app.js because
we're all ready to start coding.
2:25
If we look at the index.html file,
2:29
we can see there’s a div at the top
with an ID of flash message.
2:32
In app.js, we’ll use the ID selector
to select the flash message element.
2:38
Be sure to include the hash symbol
as we’re selecting an ID this time.
2:44
Let's make the message fade into view.
2:51
That means that first we need to hide
the message when the page loads.
2:53
Let's save and refresh the preview to
make sure it's hidden, it is, great.
2:59
Then we'll use a jQuery animation
effect to fade it into view.
3:03
Let's try the fadeIn animation.
3:06
So let's save and preview the page.
3:18
As you can see, the message fades in
quite quickly, only 400 milliseconds.
3:21
That's because all jQuery animations
last for 400 milliseconds by default.
3:26
However, you can alter the time by passing
in a value to the jQuery animation method.
3:31
To make the fade effect more obvious,
3:37
let's fade the message
in over two seconds.
3:39
To do that,
we'll pass 2,000 to the fadeIn method.
3:41
There are 1,000 milliseconds
in each second.
3:44
So 2,000 milliseconds is two seconds.
3:48
Let's save and refresh the preview.
3:52
And the message is now
appearing more slowly.
3:56
Two seconds seems a bit too slow.
3:58
Let's change it to 1,000 milliseconds,
or one second.
4:00
And that's better.
4:09
Now we wanna make the flash
message disappear.
4:10
Let's use the slideUp method for that.
4:13
Save the file and refresh the preview.
4:28
We'll see the message appear and
disappear.
4:32
It's a nice animiation but
4:35
we aren't really allowing the user
enough time to read the message.
4:36
We need to delay the animiation.
4:41
jQuery has a delay method that
waits a given amount of time and
4:43
then moves up to the next animation.
4:47
I'm going to sandwich in a delay
call between fadeIn and slideUp.
4:49
Let's give the user three
seconds to read the message and
5:01
then slide the message out of view.
5:04
Save and preview.
5:10
The message fades in, we wait three
seconds, and it disappears, awesome.
5:17
Instead of fadeIn,
5:22
let's use slideDown as that animation is
complementary to the slide up animation.
5:23
Save and preview.
5:35
And that's looking pretty good.
5:41
We can get the same effect in even
less code, jQuery let's you string or
5:42
chain together methods
on the same element.
5:47
In other words, you can chain all
the methods together like this.
5:50
Writing the code like
this is more readable and
6:03
saves us from having to select the flash
message div over and over again.
6:05
We can see that we select the flash
message, hide it immediately,
6:10
then reveal the message with a slideDown,
6:14
wait three seconds, and
then slide the message back up.
6:17
How does this work?
6:22
Most jQuery methods return the same
element each time they're called.
6:23
So when the hide method is called on the
flash message, jQuery hides the element,
6:28
then returns a reference to that element.
6:32
So calling slideDown next applies that
animation to the message element as well.
6:35
You can think of it a bit
like a factory line.
6:40
jQuery grabs the element from the page and
6:43
passes it down the line where
each method does something to it.
6:45
Chaining is a nice feature of jQuery
that makes your code easier to read and
6:49
write but it can also get out of hand and
lead to long lines of code.
6:52
If a line of jQuery is getting too long,
6:57
you can add a new line at
every method like this.
6:59
Indenting the method under the element
you're performing actions on
7:04
helps with readability as well.
7:08
Feel free to play around with this and
experiment with different animations and
7:10
delay times and see what fun animation
sequences you can come up with.
7:14
As you just saw it, jQuery has some really
nice animation methods that can add
7:19
a little flair to the user
experience of your pages.
7:23
In a short amount of time and
7:27
with a relatively small amount of code,
we performed a complex animation sequence.
7:28
You also saw how to write more
concise code with method chaining.
7:34
You may now be starting to understand why
jQuery's motto is write less, do more.
7:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up