Animating Elements with jQuery

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