3.3 Modifying Effect Speeds

[SOUND] Welcome back to 30 days to learn jQuery. Today we're going to take a look at effect speeds. So I'm gonna go in to Sublime Text and what you see here, we simply have a demonstration set up. We have an h1 and then we have a div with a class of content that contains a handful of paragraphs. Nothing special here at all. We simply want something to work with. So what I want to do now is I want to hide this content and when I click on that h1, I want to reveal it. Okay, well that should be fairly easy for us now. We know how to do that. The first step is, we grab the div with a class of content. And then we're going to hide all of it. If I come back, reload the page, now it's hidden. Really easy. The next step is when the user clicks on the h1 tag, remember, you can attach a click event listener to anything. Even to the document, that you'll come to learn. Now jQuery h1, when it is clicked, in that case we run a callback function. And what we wanna do is, grab whatever comes after it and slide it down. So, we can do that by saying this, then get the element node that comes next and slide it down. That should be fairly easy. Let's try it. Refresh. I'm going to click on the h1, and sure enough, that content slides down. But have you ever thought about how do we set the speeds? How do we know how quickly that's going to slide down? Well, we can specify 2,000. And that would be two seconds. And then we reload, click on it, and now over the course of two seconds that information is going to slide down. But jQuery also offers some helper values. For instance, if I change this to slow, and we try it one more time, this time that's going to be revealed over the course of 600 milliseconds. And if we change that to fast, that's going to be upped to 200 milliseconds. One more time. Reveal. And now that took effect in one-fifth of a second. Now, if you want to know where this is taking place, we're going to return to the jQuery source. And, in this case, I simply searched for slow, because I knew that there was a slow value, and it took me right to it. So here is where we are specifying what speeds are available. And, if we scroll up, we can see that it's available via jQuery.fx, for effects. So we can access this object by doing jQuery.fx.speeds. Let's try that out. Right here, console.log, jQuery.fx.speeds. Open up Chrome Developer Tools, refresh, and sure enough we have an object that contains those values. Now what you see here is they offer a default value, and this means if it does not understand what you passed it, if it's not a keyword or if it's not an actual time span in milliseconds, then it defaults to default, as you can see right here. So if we try that again, click on it, that comes down at the default value which is equal to 400 milliseconds. And what this means is you can pass anything here and if jQuery doesn't understand it, it's going to default to that value of 400 milliseconds. So we could put yourMomGoesToCollege, and if we try it one more time. Refresh. The exact same thing is happening, because it didn't find it, so it just defaults to whatever is set there. Now, as you would expect, you can override this if you need to. For example, what if you want your project's default to be two seconds? You would never want this, but just so that we can easily see that it's taking effect. In the same way that we update any object, we can do the same thing to jQuery.fx.speeds. So let's try it. jQuery.fx.speeds. And I'm going to update default. And I'm gonna make that equal to 2,000 milliseconds. So now, in this case, when we call the yourMomGoesToCollege slideDown value, that's not going to be recognized by jQuery and it's simply going to run its default. So let's try it, come back, reload the page. I click on reveal and, as we'd expect, over two seconds, that's going to display. Or, why this is better, is you don't have to pass a value at all. Whenever you use your fades or your slides, you can set a default at the beginning of your project, and that will always take place, so that you don't always have to hard code it in. All right, let's try it and make sure that works. Refresh, there we go, and that's doing the trick as well. Or alternatively, let's say that you want to add your own values. We're going to forget doing a default. But instead, we're going to add our own custom one. And this one would be called tortoise, and we're going to set that to something really, really slow. Maybe you want this to take place over five seconds. I don't know why you ever would, but if you needed to do it, you could save that to jQuery.fx.speeds. And then whatever you want to reference that in your projects you simply refer to tortoise. Let's try it. One more time, reveal, and now over the course of five seconds, that content is displayed. Now the takeaway for this lesson is you always refer to the jQuery source. And this is why I wanted to drill it into you from lesson one. If you need to figure out why something is taking place, for example, if you were wondering what does slideDown fast refer to, you would come to the jQuery source, make sure you save this to a bookmark, and you would search for fast. Now you can see it immediately takes us there. And you can figure it to yourself, okay, well that's in a speed object, what is that contained in? Well here, we are extending jQuery. So we can access it via jQuery.fx.speeds, and then I can add my own. So, bookmark the jQuery source and use it as your first stop for documentation.