1 00:00:00,000 --> 00:00:03,740 Alright, let's talk about callback functions. 2 00:00:03,735 --> 00:00:05,435 In a callback function. 3 00:00:05,430 --> 00:00:07,660 Really all a callback function is, 4 00:00:07,660 --> 00:00:12,570 is a function of a little piece of code that should run after something is done running. 5 00:00:12,570 --> 00:00:18,960 So for instance, we have a selector here and we said Register a click event listener. 6 00:00:18,960 --> 00:00:21,270 And anytime that's supposed to run, 7 00:00:21,270 --> 00:00:23,640 execute this function, that's a callback function. 8 00:00:23,640 --> 00:00:27,970 So once a click happens, do a thing. 9 00:00:28,190 --> 00:00:33,660 We can also lake select our box from our previous lesson. 10 00:00:33,660 --> 00:00:38,840 And we could say something like fade out. 11 00:00:38,835 --> 00:00:43,085 And we could give this parameter, 12 00:00:43,085 --> 00:00:45,445 let's say it's going to take 1.5 seconds. 13 00:00:45,440 --> 00:00:47,660 And then we could give this a function as well. 14 00:00:47,660 --> 00:00:49,610 And this is a callback function. 15 00:00:49,610 --> 00:00:51,290 And so we gave it a parameter, 16 00:00:51,290 --> 00:00:55,700 how long it should take comma function and then just a regular function here. 17 00:00:55,700 --> 00:00:58,560 And then we can say console dot log. 18 00:00:58,570 --> 00:01:01,670 Fade-out is complete. 19 00:01:01,670 --> 00:01:05,330 Let's go ahead and give this a shot and let's go to our console here. 20 00:01:05,330 --> 00:01:09,680 It's going to fade out. Fade out is complete. 21 00:01:09,680 --> 00:01:14,180 And we can do this with a lot of different things we could do fade 22 00:01:14,180 --> 00:01:19,200 out and we could do slide up. 23 00:01:20,440 --> 00:01:22,490 As, as fatal, it is complete. 24 00:01:22,490 --> 00:01:25,820 This should have said slide out is complete button regardless, 25 00:01:25,820 --> 00:01:27,700 the callback function still works. 26 00:01:27,695 --> 00:01:33,025 And so really all we're doing here is if we simplify this a little bit, 27 00:01:33,020 --> 00:01:35,470 we're saying select the box, 28 00:01:35,465 --> 00:01:39,295 slide up, take 1.5 seconds when you're done 29 00:01:39,290 --> 00:01:44,810 that console log ODE is complete or slideUp is complete. 30 00:01:44,810 --> 00:01:48,290 We can do this with a lot of different animation. 31 00:01:48,290 --> 00:01:49,520 So we've got slide, 32 00:01:49,520 --> 00:01:51,100 we could do fade. 33 00:01:51,095 --> 00:01:53,005 We could use it with togas as well. 34 00:01:53,000 --> 00:01:54,200 So as you toggle, 35 00:01:54,200 --> 00:01:58,060 fade is gonna take 1.5 seconds to fade in or fade out. 36 00:01:58,055 --> 00:02:01,555 And fade effect is complete. 37 00:02:01,550 --> 00:02:03,490 And so let's go ahead and click this. 38 00:02:03,485 --> 00:02:05,815 Oh, something is not right here. 39 00:02:05,810 --> 00:02:07,730 It's not toggled, fade, 40 00:02:07,730 --> 00:02:10,250 it is fade toggle. 41 00:02:10,250 --> 00:02:13,940 I get that backwards every time and every now and then. 42 00:02:13,940 --> 00:02:19,530 And so all that did was automatically fade out because it was already visible. 43 00:02:20,050 --> 00:02:24,700 Now let's wrap this in a event listener. 44 00:02:24,695 --> 00:02:30,815 Select that button, dot on click function. 45 00:02:31,360 --> 00:02:34,550 Due to, due to due, and you see them going pretty fast here it gets, 46 00:02:34,550 --> 00:02:35,900 it gets a lot easier over time. 47 00:02:35,900 --> 00:02:39,500 And you can see this starting to be a pattern in jQuery, 48 00:02:39,500 --> 00:02:41,090 we have a selector, 49 00:02:41,090 --> 00:02:44,600 do a thing, a Function Selector, 50 00:02:44,599 --> 00:02:48,039 do a thing, do a thing right there. 51 00:02:48,035 --> 00:02:53,995 A Function Selector, do a thing, a function. 52 00:02:53,990 --> 00:02:56,360 And let's go ahead and get rid of this. 53 00:02:56,360 --> 00:03:00,140 1500 milliseconds or 1.52, fade in, fade out. 54 00:03:00,140 --> 00:03:02,630 And let's just give this a shot to click it. 55 00:03:02,630 --> 00:03:03,610 Fades out. 56 00:03:03,605 --> 00:03:06,695 Fade effect is complete. You can see it right down there. 57 00:03:08,230 --> 00:03:10,750 Perfect. Look at that. 58 00:03:10,745 --> 00:03:13,685 That is working exactly the way we want it to work. 59 00:03:13,685 --> 00:03:16,745 Now a callback function is really useful if something is faded out, 60 00:03:16,745 --> 00:03:19,195 maybe you want to then remove it. 61 00:03:19,190 --> 00:03:23,330 So let's do this, let's do fade out. 62 00:03:23,330 --> 00:03:27,080 And we can do this dot remove. 63 00:03:27,080 --> 00:03:29,360 And so once this is faded out, 64 00:03:29,360 --> 00:03:32,800 because right now you can see that if we click this, it's going to fade out. 65 00:03:32,795 --> 00:03:34,375 It's still actually in our DOM. 66 00:03:34,370 --> 00:03:37,850 Maybe we want it to be completely removed for whatever reason. 67 00:03:37,850 --> 00:03:39,880 We could click this. 68 00:03:39,875 --> 00:03:42,475 And you notice that it actually completely 69 00:03:42,470 --> 00:03:44,930 remove yourself from the document object model. 70 00:03:44,930 --> 00:03:47,300 So see this down here. 71 00:03:47,300 --> 00:03:50,090 Watch that it disappears, 72 00:03:50,090 --> 00:03:52,070 it becomes completely removed. 73 00:03:52,070 --> 00:03:55,240 And now we can't click this if it's rendered useless. 74 00:03:55,235 --> 00:03:56,755 So if you need a onetime event, 75 00:03:56,750 --> 00:03:58,330 that is a good way to do it. 76 00:03:58,325 --> 00:04:01,525 Now you actually don't need to practice anything with callback functions. 77 00:04:01,520 --> 00:04:04,640 We've been writing callback functions this entire time. 78 00:04:04,640 --> 00:04:06,950 So little bit of a surprise that are callback functions, 79 00:04:06,950 --> 00:04:11,980 you are pretty much a grandmaster Wizard at callback functions at this point in time. 80 00:04:11,975 --> 00:04:16,865 In the next lesson, let's talk about adding our own animations.