Hey, everyone, in this video, we're going to talk about effects, we already learned a few example
of effects like the Hyde method.
In this lesson, we are going to learn a few more and we are also going to learn how to customize our
effects.
So let's get started talking about speed in callback function, so normally when we use the hide method,
we don't pass any argument.
So let's start with this example.
There's this hide button which has the idea of hide button.
And if we want to hide it after clicking, the way we would do this is just selecting it.
Then setting the click.
Event.
And now let's select it again.
And just use the hide method, so this is considered to be an effect and this is going to be clear when
we start customizing it.
So let's save this.
Refresh the page.
Let's click it and as you can see.
We were able to do it without any problem, but let's say we want this transition from showing and not
showing to be slower.
So one argument we can pass is the speed so we can pass a speed in milliseconds, which is going to
be the time that it's going to take to complete the action.
So for this example, let's try two seconds.
So this is going to be two thousand milliseconds.
So going back there, instead of just using it like this, let's try to pass a time.
So now two seconds.
Let's save this.
Refresh the page.
Let's see what happens, it's like hide.
And as you can see, this was a bit slower.
Let's try again with maybe four seconds so we can see it better for.
Refresh the page, let's click at.
And now we can see it fading.
Until it's completely hidden, so this is a pretty cool way of customizing our effects.
Now, the second argument we can use on effects is a callback function.
So this is just a function that's going to be executed when this method has finished.
So in this case, we are taking four seconds.
To hide the button and when this is completely finished, we can pass a function to execute something.
So let's go back there and let's add a second argument to this Hyde method.
So comma and now a function.
So now when this is over, I have a text here that it's hidden at the moment, the ID is hidden text.
If we uncheck this property, we can see that we also have the stacks.
So what we are going to do is after we hide the button, let's show this text.
So let's copy this ID.
And now let's just get this text and show it.
So since we are using it as a callback function, this is only going to be executed when this method
is finished, so let's see how this is going to work.
Refreshing the page, I'm going to click hide, it's going to take four seconds, it's fading now it's
hidden and now we show the text, which is different if we had this code outside here.
Now, let's try again, so let's click hide.
It's still hiding the button, but it already showed the text.
And why is this happening while this is happening?
Because JavaScript is an asynchronous language.
So this means that one operation doesn't have to wait for the previous one to finish to be executed.
We can execute multiple operations at the same time.
So when we click to hide the button, it starts that operation and then it just goes to the next one.
If we don't want this, if we want this second operation to start, the first one to finish, then we
can use it as a callback function.
So this is why we placed it inside here.
And this time it's only going to be executed when this one finishes.
Now let's learn another interesting, in fact, we can use, which is the Torgau.
So the same way we had the Torgau class, we can also use toggle to toggle between height and show.
So this is interesting in an element like this.
So this is just simulating like a frequently asked questions.
S. So if we go to Apple's website.
I think I showed you this once, but let's see it again, let me just go to the iPhone.
Let's see if we can find some frequently asked questions.
Let's go down here.
Not here.
Let's try to.
Buyat.
All right, so here we have a few questions, and as you can see, it is not showing the answers.
Only after I click on it, it's showing if I click it again, it's hiding.
So what this is doing is just using the hide and show method by using the toggle so we can keep toggling
between hiding and showing this element.
And this is exactly what we are going to do in this example.
So let's inspect this.
So here we have this arrow button here.
Let's copy the ID of it.
Let's get a click event to this element.
And now every time we click it, what we are going to do is just toggling this content area.
So here we have an element with the idea of tab content.
So tab content we don't have to control if it's showing or not showing, we can just use the Torgau
method and it is going to do all the work for us.
So saving this.
Refreshing the page when I click here.
Now it's hiding, I click again, it's showing we can keep doing this forever to make it even cooler.
I have a class called Flip, and when you add the flip class to the Targo tab aliment, it is going
to rotate one hundred and eighty degrees.
So I'm just going to simulate it here.
Let's add a class.
Of flip, look what's going to happen with the arrow, so now we just turned it one hundred and eighty
degrees.
So let's also toggle this class every time we click it.
So going back to the code, let's just copy this.
And now the name of the element is Torgau Tab.
And what we want to do with it is just Tokugawa class in the name of the class is Flip.
So if it doesn't have that class, it's just going to add it.
If it already has the class, it is going to remove it, which is exactly what we want in this case.
So saving this.
Going back there, let's try again, and now this is even cooler so we can do this using the hide and
show or torgau methods and we also have a few other methods.
So maybe you just want it to be different.
So instead of just hiding and showing it like this, maybe you just want it to slide up.
So Jake Wari has also some interesting effects that you can use.
So instead of using hide and show, let's try to slide up and slide down.
And in this case, it's just going to do the same thing.
But instead of just hiding and showing there's a sliding effect.
So let's use the slide toggle.
Instead of the Torgau.
Like this, and now let's see the difference.
Let's try again.
And now, as you can see, there's this effect which if I'm not wrong, it's exactly what Apple is using
here.
Yeah, so this is just using the slide effect, which is exactly what we are applying here.
There's also the fade in and fade out.
Which is going to lower the opacity before hiding it.
So, again, let's try the fade toggle to see the difference.
Let's try again, and now you can see that it's fading.
So this is up to you.
In this case, I think the slide Torgau is better for this kind of element, but depending on what you're
doing, maybe the Faid Targo is going to work better for you.
So, as you can see, equerry makes our lives easier because we can do the school things with just a
few lines of code.
Of course, everything that we are doing here would be possible to do in pure JavaScript, but we would
need much more lines of code and some logic.
And with Jake Wari, it's so easy to implement these things.
So before we finish this lesson, I just wanted to say that when we talk about passing the time so like
this, we are passing two thousand milliseconds in January.
You can also use.
The slow and fast words, so maybe if you see some example out there on the Internet, you will see
instead of using milliseconds, using slow or fast.
So just so you know, if you use slow, Jake, where it is going to use six hundred milliseconds and
if you type fast, jury is going to use two hundred milliseconds if you don't type anything.
So most of the times we are not going to type anything like here.
We are just using Torgau, we are just using.
Show, so every time we use these methods without passing any, no jury is using the default value of
four hundred milliseconds.
So I thought it would be interesting to mention this.
So that was all for now.
I'll see you in the next video.