WEBVTT 0 00:00.740 --> 00:07.140 Now jQuery also makes it really easy to implement some common animations that you might want to do when 1 00:07.140 --> 00:08.480 you're creating your web site. 2 00:08.670 --> 00:12.930 So let's head into Atom, and inside our index.js at the moment 3 00:12.930 --> 00:19.250 we’ve got a click listener on all of our buttons that changes our h1 CSS to the color purple. 4 00:19.260 --> 00:25.620 Now if we were to delete this method, so instead of using .css we use something like .hide, 5 00:26.120 --> 00:30.690 and this method is an animation that will hide the selected element. 6 00:30.870 --> 00:35.410 So when we click any button in our web page it should try and hide the h1. 7 00:35.490 --> 00:37.080 So let's see what that looks like. 8 00:37.200 --> 00:43.130 Let's refresh the page and you can see that our h1 disappears when I click on any of the buttons. 9 00:43.140 --> 00:51.340 Now if we wanted to show that h1 instead, we would have to select our h1 and say .show. 10 00:51.840 --> 00:55.340 And that will make it reappear. 11 00:55.350 --> 01:03.930 Now if instead of only making our h1 hide and disappear forever, we wanted to toggle the hide and show, 12 01:04.140 --> 01:06.000 then we can simply say toggle. 13 01:06.000 --> 01:09.410 So now when I click on any button it'll hide my h1. 14 01:09.630 --> 01:14.760 And then when I click on any other button it will show my h1. And I can toggle it's appearance 15 01:14.820 --> 01:17.350 by clicking on my buttons. 16 01:17.370 --> 01:19.850 Now hiding is a very sudden kind of event. 17 01:19.860 --> 01:26.480 It disappears and the element gets removed from the flow of our HTML, so everything else moves up. 18 01:26.670 --> 01:30.860 And this is a very sudden sort of disappearance and appearance. 19 01:30.870 --> 01:37.290 Now if we wanted that to be a little bit more progressive then we can use something called fadeOut instead. 20 01:37.530 --> 01:44.130 And you can see that when I click now it’ll reduce the opacity of my selected element, and then it 21 01:44.130 --> 01:45.130 will hide it. 22 01:45.300 --> 01:53.400 And of course fadeOut has its related opposite which is fadeIn, and that will make our h1 appear 23 01:53.460 --> 01:56.520 and also fade into full opacity. 24 01:56.550 --> 02:03.780 Now all of these methods come with a toggle option, so fadeToggle will allow our buttons to fade out, then 25 02:03.780 --> 02:05.900 fade in, then fade out. 26 02:05.910 --> 02:08.240 I can do this all day long. 27 02:08.610 --> 02:08.920 All right. 28 02:08.940 --> 02:16.080 So in addition to fading and hiding you can also use a slideUp and slideDown. 29 02:16.140 --> 02:23.080 And what this does is it kind of just collapses our element that was selected, and slide down 30 02:23.220 --> 02:30.140 will just uncollapse that element. And again slideUp comes with slideToggle. 31 02:30.450 --> 02:38.220 So this will just slide up, slide down, slide up, slide down, and this can be really useful if you have 32 02:38.220 --> 02:41.670 something like a drop down menu for example. 33 02:41.670 --> 02:48.120 Now if you wanted more fine grained control over your animations then instead of using these pre-built 34 02:48.120 --> 02:50.610 ones you can use something called .animate. 35 02:50.790 --> 02:53.720 And this allows you to define some custom 36 02:53.790 --> 03:01.620 CSS that you want to gradually animate towards. So inside the parentheses we can insert a set of curly 37 03:01.620 --> 03:08.430 braces, and inside the curly braces we're going to add our new CSS rule that we're going to animate to. 38 03:08.670 --> 03:15.380 So, for example, I can change the opacity of my selected element to only 0.5, 39 03:15.390 --> 03:18.250 so 50 percent of its previous value. 40 03:18.570 --> 03:25.290 So now if we hit save and refresh and I click on one of these buttons you can see that my element just 41 03:25.290 --> 03:30.810 got a lot more transparent, and it might be a little bit easier if I changed the color to something a bit 42 03:30.810 --> 03:33.260 more easy to see like say purple. 43 03:33.300 --> 03:37.860 You can see that clearly makes the opacity much much lower. 44 03:37.860 --> 03:43.110 Now the thing to remember about the animate method is that in between the curly braces you can only 45 03:43.110 --> 03:47.180 add the CSS rules that have a numeric value. 46 03:47.220 --> 03:51.770 So that means that you can’t animate to something like a color, 47 03:51.780 --> 03:52.050 right? 48 03:52.050 --> 03:54.580 You can't change the color to red. 49 03:54.630 --> 03:57.050 And when I run this you can see that we get an error. 50 03:57.240 --> 03:58.440 Red is not defined. 51 03:58.500 --> 04:04.920 And this is because it's very difficult to create that kind of tween animation that gradually progresses 52 04:04.980 --> 04:09.380 from one style to another using the animate method. 53 04:09.420 --> 04:13.560 So you have to stick to things that have a numeric value. 54 04:13.590 --> 04:18.150 For example a margin of 20 pixels, that it can do. 55 04:18.510 --> 04:23.320 Or if you wanted to make it a percentage, then you can include it as a string. 56 04:23.400 --> 04:27.580 So 20 percent margin which makes it much bigger. 57 04:27.810 --> 04:34.580 But essentially make sure that this second value in the CSS that you're trying to animate to is a number 58 04:34.590 --> 04:35.550 value. 59 04:35.550 --> 04:42.530 Now if you wanted to have more than one of these animations happening then you can chain them together. 60 04:42.570 --> 04:44.130 So what do I mean by chaining? 61 04:44.310 --> 04:50.040 So for example if we wanted our h1 to slide up, 62 04:50.550 --> 04:59.070 but then after it slid up, I then want it to slide down, and after it slid down I want to change the CSS 63 04:59.070 --> 05:03.060 to have an opacity of 0.5, 64 05:03.060 --> 05:04.300 so 50 percent. 65 05:04.530 --> 05:07.110 So essentially what we've done here is chained 66 05:07.140 --> 05:14.580 three methods together so that we target our h1 and first get it to slide up, then slide down, then 67 05:14.640 --> 05:15.450 animate. 68 05:15.690 --> 05:22.410 Now remember that if this is all targeting the same thing it can't slide up and slide down at the same 69 05:22.410 --> 05:22.960 time. 70 05:23.130 --> 05:25.490 So it will do it in order. 71 05:25.620 --> 05:27.800 So let's check it out. 72 05:27.990 --> 05:31.120 Slide up, down and change opacity. 73 05:31.230 --> 05:32.730 So that's pretty cool, right? 74 05:32.820 --> 05:38.220 And if you're worried right now that you can't remember what all of these methods are called or how 75 05:38.220 --> 05:40.290 to use them then don't worry. 76 05:40.330 --> 05:44.200 As programmers we try to save the sacred space that is our brain. 77 05:44.400 --> 05:47.570 So never try to remember or memorize anything. 78 05:47.580 --> 05:49.430 That's not what it's about. 79 05:49.530 --> 05:55.980 Essentially for me programming is basically like an open book exam, and nobody memorizes things for open 80 05:55.980 --> 05:57.260 book exams, right? 81 05:57.270 --> 06:04.050 You just try to understand what's going on because remember that there is always the documentation and 82 06:04.050 --> 06:10.920 the whole world wide web out there to help you in the exact moment that you need the information. You 83 06:10.920 --> 06:16.260 just need to know that they exist and roughly what they were called or what they're able to do. 84 06:16.590 --> 06:21.260 So for example if we couldn't remember how to use slideUp, then we could search for something like, 85 06:21.260 --> 06:23.020 so we know it's about jQuery, 86 06:23.330 --> 06:30.710 and we know that it was an animation, and we know that we needed to slide something, right? 87 06:30.900 --> 06:32.510 So let's hit enter. 88 06:32.550 --> 06:37.370 And you can see that we've already got access to our slideDown event. 89 06:37.500 --> 06:45.690 And if we looked a little bit further upstream than we can see all of our effects: animate, delay, fadeIn, 90 06:45.690 --> 06:47.390 fadeOut, fadeTo. 91 06:47.640 --> 06:54.120 And this is the jQuery documentation which is searchable on here, on jquery.com, but it's actually 92 06:54.120 --> 06:59.490 much easier to just search through Google, because it gives you the most relevant results, and it might 93 06:59.490 --> 07:02.190 give you the W3 Schools or the MDN, 94 07:02.400 --> 07:05.510 but jQuery is extensively documented. 95 07:05.610 --> 07:10.900 And even if it's not in the documentation, somebody would have already asked a question on Stack Overflow, 96 07:11.190 --> 07:15.410 or somebody will be able to help you on Stack Overflow with your questions. 97 07:15.780 --> 07:17.530 So never memorize. 98 07:17.550 --> 07:22.500 Always remember that all the resources that you need are just a few keystrokes away. 99 07:22.920 --> 07:27.470 Now I hope you're ready for a challenge because I've got a big challenge for you. 100 07:27.630 --> 07:29.900 This is definitely a boss level 101 07:29.930 --> 07:37.380 fight. Now we're going to create a game using jQuery, and in the process you'll be able to consolidate 102 07:37.440 --> 07:44.400 what we've learned in this module and reassure yourself that you've absorbed all of this information. 103 07:44.400 --> 07:46.470 So once you’re ready, head over to the next module.