Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Create simple, fun animation sequences with jQuery!
Further Reading
- jQuery Docs: Animation Effects
- Method chaining
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 up