1 00:00:00,000 --> 00:00:02,730 Let's go ahead and toggle a fade, 2 00:00:02,730 --> 00:00:05,120 a fade effect, and a display effects. 3 00:00:05,120 --> 00:00:07,050 So we need to do two different things here. 4 00:00:07,050 --> 00:00:10,220 Before anything, we need some sort of event listener. 5 00:00:10,215 --> 00:00:12,935 Click Me, and it's just a simple button. 6 00:00:12,930 --> 00:00:16,680 So let's go ahead and register this button as a click event. 7 00:00:16,680 --> 00:00:18,580 Button. 8 00:00:18,580 --> 00:00:24,760 Dot on click function. 9 00:00:24,755 --> 00:00:28,735 And that's how we register the click event listener. 10 00:00:28,730 --> 00:00:31,520 Then we need to select that box. 11 00:00:31,520 --> 00:00:34,340 And we can do toggle. 12 00:00:34,340 --> 00:00:37,220 And we can do fade toggle. 13 00:00:37,220 --> 00:00:42,580 And this is either going to fade in or fade out depending on how visible it is. 14 00:00:42,575 --> 00:00:44,815 So let's go ahead and give this a shot. 15 00:00:44,810 --> 00:00:46,850 When we click this, fades in, 16 00:00:46,850 --> 00:00:49,010 fades out just like that. 17 00:00:49,010 --> 00:00:52,090 And we can see here there's a style attribute and watch it. 18 00:00:52,085 --> 00:00:54,385 When I click this, it's going to fade out. 19 00:00:54,380 --> 00:00:57,710 And it changes the opacity down to 0, 20 00:00:57,710 --> 00:01:00,670 and then it changes the display to none. 21 00:01:00,665 --> 00:01:02,495 And when it fades back in, 22 00:01:02,495 --> 00:01:03,535 it changes the UPC. 23 00:01:03,530 --> 00:01:07,700 It scrolls that backup to one or a 100% and 24 00:01:07,700 --> 00:01:12,280 makes it display block or actually just gets rid of the display property altogether. 25 00:01:12,275 --> 00:01:13,865 We can see it's display none. 26 00:01:13,865 --> 00:01:17,485 And it's going to be whatever I told it to be before. 27 00:01:17,480 --> 00:01:18,740 So if it's inline-block, 28 00:01:18,740 --> 00:01:19,850 it's going to be inline-block. 29 00:01:19,850 --> 00:01:21,860 If it's displayed block or flexbox, 30 00:01:21,860 --> 00:01:23,060 it's going to be flexbox, 31 00:01:23,060 --> 00:01:26,540 it's going to be whatever we set it to be in CSS. 32 00:01:26,540 --> 00:01:28,160 So we can fade toggle. 33 00:01:28,160 --> 00:01:33,400 The other thing we can do is simply toggle. 34 00:01:33,395 --> 00:01:37,405 This is going to toggle it to display or to not display. 35 00:01:37,400 --> 00:01:43,700 So simply, just like that, That's all we're doing. 36 00:01:43,700 --> 00:01:45,200 We're clicking it. And every time we click it, 37 00:01:45,200 --> 00:01:47,600 it either makes it visible or makes it invisible. 38 00:01:47,600 --> 00:01:48,910 That's all it's doing. 39 00:01:48,905 --> 00:01:53,425 Just as a recap, toggle is going to basically use hide and show. 40 00:01:53,420 --> 00:02:03,430 Whereas fade toggle is going to use fade in and fade out. Go ahead and give that a shot. 41 00:02:03,425 --> 00:02:06,325 Try fade toggle and try regular toggle. 42 00:02:06,320 --> 00:02:10,580 These are going to be useful when you create interactive websites for people. 43 00:02:10,580 --> 00:02:11,890 When someone clicks something, 44 00:02:11,885 --> 00:02:14,065 does it become visible? If they click out of it? 45 00:02:14,060 --> 00:02:17,180 Does it become not visible like a menu system, 46 00:02:17,180 --> 00:02:19,160 like a drop-down menu system. 47 00:02:19,160 --> 00:02:21,520 When you click the little icon that 48 00:02:21,515 --> 00:02:24,955 suggests that you could have a menu and it drops down. 49 00:02:24,950 --> 00:02:27,130 Maybe you want to toggle. 50 00:02:27,125 --> 00:02:31,195 So there are, there are lot of different ways in which we would use this. 51 00:02:31,190 --> 00:02:35,530 No, honestly fade in and fade out is not used too often anymore. 52 00:02:35,525 --> 00:02:38,215 Just because it looks a little bit cheesy, but, you know, 53 00:02:38,210 --> 00:02:40,880 maybe a couple of years from now that the whole web, 54 00:02:40,880 --> 00:02:42,980 the whole internet decides fading in and fading 55 00:02:42,980 --> 00:02:45,470 out is a thing that we wanted to do again. 56 00:02:45,470 --> 00:02:48,430 In the next lesson, let's go ahead and talk about sliding 57 00:02:48,425 --> 00:02:52,085 up and sliding down as another form of animation.