Welcome back.
So when I initially introduced Jay queery I mentioned that it helps us do things like select elements
manipulate them at event listeners.
And I also mentioned that it helps with effects and animations.
So in this video I'm going to do a quick preview of some of those built in effects in particular I'm
going to show two broad categories of effects fading effects and slides.
So I'm on the Jay Corey docks here on the effects category.
You can see there are quite a few methods that have to do with effects and I'm going to start by showing
the fade effects so I'm going to look at fade out to start.
What fadeout does is you select an element with a dollar sign or a set of elements and you call that
fade out on it and it will animate that element from full opacity down to full transparency or zero
opacity.
So it basically fades an element out and you can provide a duration if you want it to be slow or fast
or very slow.
You can provide a number of milliseconds.
The default is 400 milliseconds and then you can provide a callback to run at the end which I'll show
in just a moment.
So I'm going to make a new file here to demonstrate this effect study demo and I'll just copy over our
structure from the last demo page and this one will call J Querrey effects.
So we have that set up and I'm going to get rid of all of this content here and then I'm going to add
in a few divs.
Let's do three divs and we're going to use these divs and fade them out and animate them and slide them
up and down.
And so I'm going to give them some content inside this first one will be these don't fade me the next
one.
I'm begging you please.
And then lastly we'll have one that says Help help help.
So these divs are desperate not to be faded away.
Unfortunately today's not their lucky day.
And we are going to be fighting them out.
So to make this clearer I'm going to add in some style here to our lives so that they have a color that
we can see fade away.
And they also have a width and height that we can see slide up and down.
So I'm going to select all divs and give them a with 100 pixels and a height of 100 pixels and a color
background of teal and let's save and we'll open this up.
We have three divs.
However I'd like them to be on the same line.
So one way to do that is with the float left.
Now they're all in the same line but they bleed into one another.
So to fix that we can add a margin.
So we'll just do a margin of 20 pixels on all sides.
Now we end up with three squares and they each have some text inside and we really don't need to go
overboard styling them because all we're going to do is demonstrate how we can fit them in and out.
So we're going to add a button up top here and this button will just say click me.
And when we click this button what will happen is that our animations will run.
So I click this and these three items should fade out to start.
So to reiterate fade out will take an element from full opacity or whatever opacity It's currently at
and faded to the point of full transparency.
So it looks like this select dot fadeout and we can provide an optional string of the speed so slow
or fast or we can give it a number of milliseconds.
So let me show you that now.
I'm actually going to do this in a separate file so I'm going to make a javascript file and save.
I'll call it affects just genius save safe that had my alert
connected and linked this together correctly the bottom.
Just add a script tag.
Source equals effects.
Yes.
And if we refresh we get our connected alert.
So what we want to do here is Faid these divs out.
So we need to select the device just like that and not fade out.
And then we can provide a speed or just leave it like that.
And if that's all we want to do or refresh and you can see as the page loads they start to fade up.
So let's actually make that happen when we click the button.
So we're going to want to do a dollar sign button dot and we can either do click or I'll do dot on quick
and then pass in our callback function.
So when we click will then fade out all the divs just like that and now will refresh and if I click
you can see they all fade out.
So as I mentioned we can provide a number here something like 1000 which is a full second.
And if I refresh you'll see when I click it takes a full second for them to fade out.
An important point about fadeout is that if I inspect the page here and I look at the elements are divs
are still in the team either still in the dorm.
We just don't see them because their display has been set to none.
So it doesn't delete them or doesn't remove them from the page.
It's just hiding them.
And that's definitely an important distinction.
So let's say that I wanted to just print a message once the divs had faded out so I would fade them
out and then do something like this fade completed as it cancelled out log.
And if I run this I'll open the console and watch the order that things happen.
So when I click here I get Faid completed way before the fade is actually done.
So what happens here is that we select all the divs and we start the fade out but it takes a full second
.
And javascript doesn't wait for that second to finish before it moves on to the next line.
It immediately moved onto this line and prints out Faid completed and then the fade out finishes.
So if we want code to happen right after the fade out finishes we want it to be guaranteed to be after
we can pass in a callback here.
And so this callback will be called inside of the fadeout automatically when it's done.
So I'm going to move our constant log right there and save.
And if I refresh and now I click the fade out finishes and then we get 3 Fade completed console dot
logs for each one of those.
A more common scenario rather than just printing out a string in the Consul is to actually remove the
elements once we fade them.
So I mentioned that they're just hidden they're not actually gone.
And if we wanted to delete them like on our to do list we're going to build when we click on the trash
can next to an item we want it to fade out slowly do a nice animation.
But then also just delete off the page entirely off the DOM.
So we need to use a method called remove and we only want to remove it after the fadeout is finished
.
So that looks like this will just do this remove.
And what this will do is wait until the fadeout is finished.
And for each div it will run the Remove method on it.
So refresh and click on click me.
They fade out and then if we go over to elements you can see that our body only has a button now and
a tag all of the divs are completely gone.
And if I comment that line out and refresh you can see where they start here three divs and I click
on the button and all that happens.
They fade away and then display is set to none.
So if I put my code in the wrong place and I ran the Remove method down here I did all divs dot remove
just like that.
What would actually happen is that the order is not guaranteed.
And this is going to take a full second.
And this code won't wait for that second to finish.
So it will start to fade out and then run remove immediately after.
So that ends up looking like this where it starts to fade and just immediately after it removes them
.
So it's basically no fade at all.
So that's why J.
Corey provides this callback because it's pretty common for us to want to do something after we fade
something out or after we slide something down or whatever the animation is.
So that brings me to my next point which is that I want to show some of the other animations that we
can do so we can also fade things in.
So if I set the display to be none in the beginning like this and I refresh.
We don't see the divs because now they're hidden rather than fading them out when we click we can fade
them in and it works just like you would expect.
Click on the button and they fade in over a second and then if we want to run some code afterwards when
we know that they're done fading in we can put some code and said if the callback here.
All right so that's Faden.
GK provides one more nice fade method which is called Faid toggle and Faid toggle works the same way
.
I provide a number of milliseconds and it will know if it needs to fade something in or out depending
on if it's currently showing or not.
So if I refresh and I click on Fade toggle it starts by feeding them all in and then fading them all
out and back in.
It's basically like adding a class to the class list or using toggle class with Jay Querrey where it
just decides if it needs to fade in or fade out.
All right so that's fading the next set of effects that I want to demonstrate are these sliding effects
.
So down here we have a slide down slide toggle and slide up.
So I'll start with slide down and what it does is it takes an element that's currently not showing rather
than animating the opacity on an element like Faid does it actually animates the height of an element
.
So I'll show you how that works.
We're is going to change this.
Rather than fade toggle we'll just slide down.
And that's because when we refresh our elements are hidden.
So if I run slide down when we click on a button you'll see that the height is animated down and same
thing goes for slide up.
It does the opposite.
So if I get rid of display on so that they are showing.
And now I click on the button.
Their height is animated and they slide upwards and then display set to None at the end.
And the other method is slide toggle which works just like Faid toggle where it decides what to do.
So if I click they slide up and now slide down and back up and down.
So that's all there is to slide up slide down and slide toggle.
They were just like they're Faid analog methods.
There's also a optional callback that we can pass in.
So if we give a duration like 1 second and then I can get my call back in.
And I'll just do another con. that log at the end slide is done.
And that will only prints out once the full second slide has finished.
So I refresh.
Let's look at the console and they click on click me and you can see this only printed once the slide
was done.
Same thing here pay attention right here.
This will change to six.
There we go.
But again a more common pattern is to remove the items once we've slided them out or fade them out or
whatever we have done is to remove them.
So here it will take a second to slide them and then they're removed from the page.
And if we go to the elements tab our body is empty except for that button and the script.
So hopefully they give you a good idea of how some of the effects in a quarry work.
These are by far the most common fading and sliding.
And we're going to use them instead of our to do list app which we're going to start in the next video
.