 Okay, continuing our jQuery tutorials. We're actually just going to be adding on to our last tutorial where we learned how to fade elements in and out Let's quickly review So here's our web page as it starts off Looking at the code over here on the left. You can see that right now We're looking at the div tag of my to ID and it says a paragraph tag in it. It says click me which is right there and We have two other elements, but you can see that our two other div tags that you can see that we have a CSS style that Displays none, which means they're hidden by default And they contain some text if we go up here to our scripts. We have our jQuery library Running there Then we're have our script right here. Our script is calling functions from the jQuery script and We have our dollar sign and parentheses here anytime you see that with jQuery That means we're looking at an element in this case. We're looking at the element of our document, which is our web page And we're going to say whenever it's ready So we're making sure that the page is loaded and done loading before we start doing stuff Next we're going to look at we're going to run a function once it is ready that function looks at All elements with the div tag ID so you can see the pound symbol here Meaning that we're looking at for a div tag with an ID of and this case my2 which is our visible Elements here and anytime that that is clicked. We're going to run another function that function is going to do three things It's going to find the element with the div tag ID of my one The div tag element of my three and it's going to find this which is the element that was clicked We could also put pound my2 in there inside quotations But it's always good idea if you're working with the element that's clicked to use this because that way if you change things later On you don't have to change that the first two elements are already invisible what we're going to do is we're going to fade them in and We're going to fade them at different rates here. This one's taking three seconds. This one's taking five seconds and this one is Going to fade out because it's already visible at three seconds So when we click this this click me will slowly fade out over three seconds And the other two will fade in one at three seconds the other one at five fading in fading in fading out Okay, so what we're going to look at today is what I'm going to do is instead of Making these Well, I guess we can start with them invisible. I was going to have them Fade Now let's start with them. I don't change what I was playing on doing because I'll screw something up. Let's see We'll make them both visible to start off So now our page starts with those elements so obviously clicking this Just makes that fade out because these ones are already visible So let's change what that does instead of fading in what we're going to do here is we're going to fade to Now this is case sensitive. So fade to with a capital T just like fade in had a capital I and fade out had a capital O and We can give it the same thing here with the number of Thousands of a second that we want to delay of and then we can give it an amount that we want it to fade to So let's say here. We'll say 0.5 and this one will say zero 0.2 So now if we refresh over here and we click this There you notice that that element faded out just as it said so the element We clicked is fading out over three seconds the other two faded to a certain fade So believe it's it's from zero to one one being fully visible So the lower the number the more faded out it is. So if you want something to be faded out to a certain point so it's kind of maybe Something else is becoming the prominent thing on the page You want everything else to kind of fade away still be visible, but no that's not the active element Well, you would just use the fade to option here give it the speed that you want to fade to so in seconds are Thousands of a second here or just like before we can say something like slow And so that will make that a little bit faster because five seconds was was very slow So you can see how fast that faded to its point to Visibility this faded away completely and this one is about 50 percent or point five of its visibility And of course this is true with anything within those elements. You should be able to fade out Anything. Yeah, right now. We're just working with text. We're getting to more visual stuff in the near future So this was kind of a short tutorial just kind of a review and add on to our last tutorial on fading so Yeah, let's try something. I'm going to try something that I just thought of Just like before we're going to add a style So this is a some CSS that we're putting right into our our div tag here. We're going to say display none Now when we refresh this that first element was completely invisible. I'm going to click it and see what happens Okay, I wasn't 100% sure it does then make it visible and then fades it into Whatever percentage we give it. So here we're saying 50 percent or point five so You can definitely have things fade in and if you don't want them to fade in all the way. Well, there you go I thank you for watching and please visit films by chris.com That's chris of the K if you're enjoying these tutorials, please let me know, you know, comment below give me thumbs up You know like this video subscribe so you don't miss more of my videos And this is just kind of a build-up you know Web pages are very easy to make universal, but you know any good programming languages cc plus plus Python pearl these are all languages They're good languages because they will run on any operating system unless the operating your system really restricts it Which some operating systems do? But they should run on pretty much anything, but sometimes you have to do little workarounds or compile stuff HTML and JavaScript makes it very easy if people are using a modern browser To make simple applications and that's what we're going to be doing We're going to be making web applications that you could package into an actual Desktop or device applications such as for your Linux or Windows or I guess even Mac desktop Or for something like an Android device I'm not going to be going over iPhone stuff because of the issues with that, but We are going to down the line make a web app and Very make a very simple Android application that displays our web app that can be embedded into the app or be called from a website So that's where we're going with this. So definitely if that's something you're interested in Give thumbs up and let me know below. Thank you for watching Once again visit films by Chris calm be sure to check out this entire playlist Hopefully there's an annotation or a link in the description and I just hope that you have a great day