3.4 Creating Custom Effect Methods

[SOUND] In the last few lessons, we've learned how to use custom effects, such as slide down or fade out. But what if you wanna specify your own? Well, we can do that really easily. Here, similar to the last lesson, I simply have a div with the class of content and a couple paragraphs. Now, if we want to create our own effects, let's refer once again to the jQuery source. In this case, I'm gonna search for slide down. And here's how jQuery is implementing slide down, slide up. And what it does is, it uses a jQuery core method, jQuery.each, and it filters through this object that contains all of those effects that we've been using. And then, this is the important part right here. This is where it makes it available to the jQuery prototype, and that's referenced by jQuery.fn, it's the same as the jQuery object's prototype. And what it does here is, it says, jQuery.fn, and we'll do the first one, .slideDown, and that will be equal to a function, and what it does is, it animates that. And the animate method is something we'll go over in a future lesson very soon. So let's see how we can take this and create our own. I'm going to copy this code and come back Sublime Text and paste it in like so. Now, we can replace as we need, rather than using this array notation, we can say jQuery.fn, and this one will be called Flash. And all we wanna do here for the example is, we want to display this content, then wait a few seconds and immediately hide it. So, we need a trigger for that, I'll say h1 Click Me, just for our demo. So when I click on the h1, we show this content and then we wait a few seconds, and then it automatically hides. Okay, so now we have that set up. Right here, jQuery.fn.flash. We wanna set it up like that so that we can say, get that h1 and when it is clicked, then, we will call this. Then, once again, we're going to get that next div with a class of content, right here. And we're going to call that method on it, we're going to call flash like so. So, when we do that, by [UNKNOWN] this out, we can be sure, that this method is going to be called. Click on it, and now we see hi there has been called. So already, we've done a lot of cool stuff, we've created a custom method, but now we want to do our effect. So we'll say jQuery this, and it's important to remember that, even within this method this is going to refer to, in this case, the div with a class of content. So we want to slide that down, over the course of 500 milliseconds. However that content is already displaying by default, so let's hide that. [SOUND] There we go. Now, when the h1 is clicked, we get that next div with a class of content. And, by the way, it would make sense to cache that since we are using it more than once. But anyhow, we called the flash method, and the flash method will take that div with a class of content and slide it down. But then, how do we know, when that operation or that animation has completed? For instance, if I change this to a full second, and then I console.log, hi there. If we come back and I click on it, you'll notice that for that animation has completed, we have still moved on to the next slide. Click on it, and you immediately see hi there, before the animation has completed. One more time. So that begs the question, how can we execute code only when that slide has completed, and the way we do that is by passing a second parameter, like so. And this means slide down over the course of one second, and when that operation has completed, then, execute the code within, and we can say, hi there. One more time. Reload, click on it, and notice it does not display until that operation has completed. Click it. And there we go. So to complete our flash effect, we can say slide it down, and we're going to return that to a half second, and then we want it to just lay stagnant for a minute, so we'll say, this delay. And this means, just sit tight for a minute and we're going to delay for two seconds, and then we're going to slide up once again, over the course of 500 milliseconds. Let's try it out, click on it, click me, it slides down, it sits tight for a couple seconds and then it slides up. Now, if you are noticing one more time if I click this, pay attention to, we seem to have a little toggle effect. Click on it and then it jumps up, and that's because the margin for the h1 and the p are clashing. So, what we could do here to fix that is at the top, with instyle tags, I will say get the paragraph, and I'm gonna zero out that margin top so that it's not clashing with the h1. One more time, close this out. We click it, it slides down, it waits a couple seconds, then it slides back up, and that's our own custom method. So the final step is to clean things up a touch. In this case, because this is referring to the same thing, we can cache that, var this equals this. And then, once again, we get rid of those parenthesis, like so. Let's make sure it's working. Click it, scrolls down, comes back up. And then the last thing you may wanna do is, because we are looking for div with a class of content twice, and in this case it's much easier because we are simply getting the next element, if you would prefer, you could store that within a variable. [SOUND] Like so. Now, this raises a new known. We have saved that to a variable, so we can easily replace that with content.hide, but an important distinction to make is, all of these jQuery methods return the jQuery object. So when the method is called, it returns that object, and we should do that as well. And what that means is, we can, when we declare these variables, we can just as easily, tack the hide method on there, because we know, that will get the div with a class of content, it will hide it, and then that jQuery object is returned to content. So even though we've hidden it, content is still going to refer to the same thing. Reload, and we get the exact same effect, so that's important to keep in mind. Then when the h1 is clicked, we can either do this.next, or that can be a little rigid, because as soon as you add something here, maybe you add an unordered list. As soon as you do that, that code is going to fail, so you may not wanna do that, instead we're going to replace this with content.flash. Let's make sure it works, click on it, it still is, waits a couple seconds, comes back up. And then the final step is to place this within a self-invoking anonymous function, because otherwise content right now is a global variable and you don't wanna do that, so let's take this code and place it within here to keep things nice and clean, and, remove this. And lastly, it's a good practice to place your variables at the top of the page if you can, like so. And there is completed code, we grab the div with the completed content, we hide it, we listen for when an h1 is clicked, and when it is we grab the div with the class of content we call our new flash method that will slide down the content over a half second, sit tight for a couple seconds and then slide back up. And here's our finished effect. [BLANK_AUDIO] So great job. I will see you in the next lesson.