Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:9Length:38 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 jQuery UI Effects

In this lesson, you will learn how to use the jQuery UI effect() method to easily create a number of different animation effects.

Related Links

2.6 jQuery UI Effects

Hello and welcome back. In this lesson we're gonna take a look at the Effect method in the jQuery UI framework. The Effect method is a whole new function that's available to us in jQuery UI. And it allows us to do a couple of different animated effects. And we can see a whole list of all the effects if we jump over to the jQuery UI website at jqueryui.com. If you go to that main website and then scroll down over here to the left to the Effects section, you'll see a link for Effect. I'm gonna click on that, in here we can see a demo of it. You can click from this drop-down to choose which effect you want to use and then click Run Effect to see what it looks like. So we're going to experiment with a few of these effects, not all of them. What we're gonna be doing is we're going to click on this X button to get rid of this warning on our screen. Now not all of the effects in this Effect method are designed for closing or getting rid of an object. Some of them are just for animating it. There's one for example called shake which just shakes it back and forth but doesn't get rid of it. I just wanna take a look at a few of these effects that are designed to remove an item, or to remove an element from your browser. So I'm gonna jump into JavaScript. You can find the URL for this starting pen in your course notes for this lesson. Once you open that up, go ahead and click on Fork, and then we'll start with our new version. So again, what we wanna do is we want to click on the X to close this warning. And the X itself is inside an element that has a class of close hyphen on it. So let's point to that first in jQuery. So inside of jQuery Selector, I'm gonna say .close-warning. And we're gonna create a click event for that, so we'll do click, and then to that closing parenthesis down a couple of lines, and inside that click event, we're gonna create our function that will run whenever we click on it. And whenever we click on that, we want to create this effect on the entire warning window. And that is a div that has a class of warning on it. So we're gonna point to that appropriately with .warning. And we're gonna call in the effect function. Now inside the effect function, it's expecting us to pass in a string with the name of the effect on it. Now, as I mentioned, we're just gonna take a look at a few of these effects and we'll start with one called blind. So, now when we click on this button, we should see that effect take place. And that one looks a lot like the jQuery slideUp effect. So, it's just kind of animating that closed. Now, we can also add a duration to this if we want to. We could type comma space and we could either type something like fast inside parentheses, or slow to slow it down. So if we type slow there and then click on the X, we'll see that it takes a little bit longer, or we can actually type in a duration. So we could say maybe 4,000 which would take up four seconds. We click on that and we see that it's quite a bit slower. Now we can also add easing to this. So let's bring that down to about 2,000. And the way we would do easing in this particular case is we would put it inside an object and that object would come after the effect itself, but before the duration. So, in the interest of keeping this legible, I'm gonna nudge things down a little bit. So we have the effect itself with a comma after it. And then after that comma, we're gonna have a JavaScript object with a comma after it and then we have our duration of 2,000. And then inside this JavaScript object, we would have our easing equation. So we could just say, easing: space, and then inside quotation marks we would have whatever easing equation we want to use. So let's say we wanted to do an ''easeOutBounce'', we could do that. So we could click on the X now. And we'll see that it animates close, but it also kind of bounces into place. So that's available for you. I'm gonna comment that particular line out because I'm not gonna use that anymore for the rest of these examples. But I want to leave it there just that you can have it, you can copy and paste it if you want. So let's take a look at a few more of these effects that we can use. There's another one called clip, and by using that one we can click on the X here and we can see that it kind of does the same thing but it closes it, or minimizes it from the top and from the bottom. And it's not really a smooth transition for all the content below it. The content below it just stays in the same place until that animation is completely done and then it suddenly just jumps up. So that might not be the best effect to use in this particular instance, but that is one of the effects you can use. So there's another one called drop. If we click on the X here we can see that it just moves off to the left, fades out and then the text jumps up again. So there's another one called explode, which is really cheesy, but it's there for you. And just breaks it up into nine pieces and it goes off in different directions. We have one called fold which does just what you would expect it to do. It just kind of folds it up, like so. We have one called puff, which is a decent effect that grows and kind of disappears as it's growing. And I'm gonna leave it back on blind. So again, there are numerous different effects that we can use here. A number of which we haven't even looked at because they don't really work with this particular scenario where we're trying to get rid of this window. But, they're there for you and I would highly suggest going through all of those and experimenting with them. And hopefully you can find some creative ways to use those effects in your own work. So, thank you for watching. And I'll see you in the next lesson.

Back to the top