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