Fading Using fadeIn, fadeOut, fadeToggle and fadeTo

6 minutes
Share the link to this page
Copied
  Completed
With jQuery you can fade elements in and out of visibility.

Transcript

Hello, in this jQuery video I am going to show you fade in so you can fade in fade out, you can toggle fade and you can fade to a particular opacity as well. So, as we did in the sort of hide show toggle video, I'll recommend checking that out because we are going to be you know, using, you know, the knowledge that we acquired from this I'm gonna simplify it a bit. So I'm just gonna get rid of the input. And on top of that, I just gonna have four buttons and the four buttons are going to be to toggle and we are going to I shouldn't be fading sorry, say to be the last one. And let me just text more representative of what the button actually will do once the program toggle. And the last one is fate.

Okay, so if I save that in here, I'm going to remove this of my four of these. We're going to have and what I'll do is I'll get rid of All these pieces of code will be updating the cell. But first of all, to fade something, you need to select it as in this case, I'm making a simple div. This select can be as advanced or as simple as need to be used in this one to fade out as well. These complement each other really well for being out, reload. I fuck you're fading.

Now nothing happened. I click fade out, as it see it basically fades it out to the console. You can see it's on display nine fucking fade in. And you may have seen that is changing the opacity and there's a toggle method as well, but we'll copy that paste it here and change it. Auto reload, click As if the toggles between on and off depending on what his current status. And then the final one is phase two.

So you might actually want to fade, you know, all the way out all the way in, you might want you know, a certain percentage. And you can do that. First of all you need to specify a speed, the speed is optional on all of the other four parameter and the only other methods but for this one need to have a speed first just because you know the order of the parameters for Phase Two is speed, opacity and pullback. So for you to get to about the need to provide speed. So if we just say, for comma, and now you specify the capacity you're going to be a number ranging between zero and one, zero meaning you know, invisible one, meaning fully Visible so far zero plus 0.5. And if I save it, reload, and also, you know the speed parameter can be put into any one of these.

Well, I've got a separate video covering, you know speed. So feel free to check that out. And then we go to phase two, I think I think we can still see which very faint less than to do two beautiful to five minutes of 25% of capacity. Okay, play to us even fainter. Maybe if we do to send 5% obviously, this number can be warm your white knight saw the nanny phase, but this is a noticeable difference. 25% decrease from phase two to phase two.

As you can see, it's faded to 75% opacity. So these are the four fade methods fade in which fade all the way in so it's full opacity if if it's Not unfold the party that's what it does say that your fate to zero opacity so you'll be visible fade toggle just toggle between these two depending on you know if it's fully visible, they won't do anything. I mean I mean full rainbow to not visible if it's not visible good fully visible and the fade to fade to a particular party member. The values range between zero and one common values one for the past you okay Alex and if you want to know more about the speed parameter, feel free to check out my video covering that. I'm also going to have a separate video covering callbacks as well. So you can basically call a piece of code or function when one of these side effects is completed.

So feel free to take a look Add them. As usual. If you have any questions, feel free to drop me a message and I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.