Well done!

You have completed jQuery Basics!

Preview

Animating Elements with jQuery

7:43 with Treasure Porth

Create simple, fun animation sequences with jQuery!

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

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.

You need to sign up for Treehouse in order to set up Workspace

jQuery Basics

Well done!

You have completed jQuery Basics!

Animating Elements with jQuery

Further Reading

Related Discussions

Related Discussions