 Okay continuing with our jQuery tutorials here Review of last time we had three elements They were visible but two of them were grouped together in a div tag and the third in its own div tag And we set it up so that when you click the div tag down here It makes the other ones disappear What we're gonna do today is we're going to instead of just make things hide We're actually gonna do the reverse. We're gonna make them Fade in I suppose we can make them fade out too So here we go We're going to Basically change Let's just use some CSS here In this first div tag. We're gonna say Style style So this is some CSS here and we're going to just say Display colon none. So now if I refresh this page You notice that these elements are currently invisible. So basically it's like they're already hidden at start I suppose we could have done that with jQuery as well. Just two different ways of doing it But here what we're gonna do is we already have that We have when our document is ready We're going to run a function that function is going to look for the div tag With the ID, we know it's an ID because it has the pound symbol there and we're gonna say The ID of my to which is our click me Elements is with inside that div tag when it's clicked. We're gonna run another function that function is going to find the div tag with the ID because the pound symbol there of my one so you can see right there we have the ID of my one and Instead of hide because it's already hidden what we're going to do is we're making going to make it visible So actually let's just do that first if you haven't guessed The answer would be show because it's hidden now. We're going to show it So if I refresh this and I click the click me it makes it visible Which is nice. You can make things now invisible or visible, but let's make them Fade in nicely. So what we're going to do here is we're going to change this Instead of show we're going to say fade capital I in and We're going to save that Refresh the page now when I click click me You can see it did a slight fade instead just popping there. I'll refresh it You'll see that it kind of fades in does it kind of fast there are other options you can give in here You can pass Information to the function the fade in is a function and we're going to in this case We're going to say Inside quotations. We're going to pass it a string. We'll pass it the string of slow So now if we refresh it, we'll click that you can see it faded in a little bit slower Let's say you wanted it to fade in even slower than that or just have more control over the speed What we can do is we can pass it some information here as far as We'll say 3000 here. We'll save that We'll refresh it and we click and it slowly fades in over three seconds So these are thousands of the second so it'll take three thousandth. Well, it doesn't take three thousandths of a second if you put you know a a One in there it would fade in that one thousandth of a second which is really really fast here the delay is 3000th of a second which Well, the delay is a thousandth of a second here. We're saying three thousand. I'm never good at explaining this. I understand it Basically, it's delaying and Each delay is a thousandth of a second and we're waiting 3000 of those thousands a second making it three seconds So basically whatever seconds you want if you want it in seconds We can say five seconds by turning this into five thousand. Whoops Not that much. I would take forever. Okay five thousand. So now we have five seconds of fade in so I'll click this and It's slow should slowly Should slowly fade in Hmm Maybe there is a limit to it that that would been something for good that good for me to have known before I started doing this There we go, so three thousand works Four thousand works. Oh, you know what might happen Okay, five thousand works what might have happened was when I accidentally put in the larger number I think I saved it then and then when I change it to five thousand I didn't change it So you can do five thousand so whatever number of seconds you wanted to fade in at you can you can do that? So let's let's actually quickly since that was kind of the basics of the toil Let's look at it some more. I'm gonna say in here. I'm going to just to save time I'm just going to copy and paste this so Copy and paste this and we'll change this one to the ID of My three and what we'll do up here is we'll add another line within this function We're gonna say dollar sign parentheses, so we're looking for an element. What elements are we gonna look for well in quotations We're gonna say pound and meaning that we're gonna look for a div tag with an ID We're gonna look for the div tag of the ID of my three, which is right there So we're talking about this. This is gonna be hidden at first and We're gonna fade that in That We'll make that one 5000 we'll make this one 3000 and we'll change this to say something different as well. We'll say another Element And we'll get rid of that there and Another thing we can do we can add a another line to here. We can hide our Click me we'll hide the whole div tag and we'll do that by saying this So the element that was clicked in this place our div tag with the ID of my two and we're going to Hide that So I'm gonna refresh that so now when I click it as you can see our Elements our div tag that has the click me automatically disappears And then the two other elements fade in at different rates, so we'll refresh it click me That disappears this slowly fades in and then this slowly fades in a little slower So definitely within this function. Obviously, it's a function. You can put multiple things in there And as you can see jQuery makes it very simple for you to find elements and do different things with them Let's try changing this to fade out And we'll say at three seconds I Haven't tried this yet, so let's hope this works. Let's see Yep, it's slowly faded out over three seconds So run it again said just disappearing. It slowly Fades out as the others fade in so That's a quick look at fading elements in and out with jQuery. I hope you're enjoying this series There should be a link in the description or an annotation. Hopefully that will lead you to the entire playlist And there'll be more videos coming in the next, you know week or so And I hope you're enjoying these definitely gonna be working on this and then further down the line We'll do some jQuery mobile and then we'll work on making some sort of mobile application for mobile devices as well as desktops because everything will be Compatible with pretty much all major browsers jQuery is supported does support them, you know Majority of Browsers there are some that some features may or may not work, but that's why you test things in different Browsers before you release them. So I thank you for watching. Please is films by chris.com. That's chris of the K There should be a link in the description and once again subscribe So you don't miss anything like this video if you like this topic, and I hope that you have a great day