1
00:00:08,340 --> 00:00:14,670
Hey, everyone, in this video, we're going to talk about effects, we already learned a few example

2
00:00:14,670 --> 00:00:17,520
of effects like the Hyde method.

3
00:00:18,000 --> 00:00:24,000
In this lesson, we are going to learn a few more and we are also going to learn how to customize our

4
00:00:24,000 --> 00:00:24,720
effects.

5
00:00:26,170 --> 00:00:34,480
So let's get started talking about speed in callback function, so normally when we use the hide method,

6
00:00:34,930 --> 00:00:37,120
we don't pass any argument.

7
00:00:37,150 --> 00:00:39,100
So let's start with this example.

8
00:00:39,110 --> 00:00:43,540
There's this hide button which has the idea of hide button.

9
00:00:43,810 --> 00:00:50,740
And if we want to hide it after clicking, the way we would do this is just selecting it.

10
00:00:54,900 --> 00:00:56,370
Then setting the click.

11
00:00:57,420 --> 00:00:58,110
Event.

12
00:01:07,270 --> 00:01:09,550
And now let's select it again.

13
00:01:15,650 --> 00:01:23,030
And just use the hide method, so this is considered to be an effect and this is going to be clear when

14
00:01:23,030 --> 00:01:24,770
we start customizing it.

15
00:01:25,580 --> 00:01:26,720
So let's save this.

16
00:01:28,210 --> 00:01:29,530
Refresh the page.

17
00:01:30,510 --> 00:01:32,700
Let's click it and as you can see.

18
00:01:33,930 --> 00:01:42,180
We were able to do it without any problem, but let's say we want this transition from showing and not

19
00:01:42,180 --> 00:01:43,890
showing to be slower.

20
00:01:44,940 --> 00:01:52,890
So one argument we can pass is the speed so we can pass a speed in milliseconds, which is going to

21
00:01:52,890 --> 00:01:56,080
be the time that it's going to take to complete the action.

22
00:01:56,520 --> 00:01:59,740
So for this example, let's try two seconds.

23
00:02:00,360 --> 00:02:03,530
So this is going to be two thousand milliseconds.

24
00:02:03,960 --> 00:02:09,060
So going back there, instead of just using it like this, let's try to pass a time.

25
00:02:09,660 --> 00:02:11,370
So now two seconds.

26
00:02:12,240 --> 00:02:13,200
Let's save this.

27
00:02:14,720 --> 00:02:15,920
Refresh the page.

28
00:02:16,070 --> 00:02:18,890
Let's see what happens, it's like hide.

29
00:02:20,910 --> 00:02:24,060
And as you can see, this was a bit slower.

30
00:02:24,180 --> 00:02:30,000
Let's try again with maybe four seconds so we can see it better for.

31
00:02:31,510 --> 00:02:33,670
Refresh the page, let's click at.

32
00:02:34,610 --> 00:02:36,470
And now we can see it fading.

33
00:02:37,730 --> 00:02:45,230
Until it's completely hidden, so this is a pretty cool way of customizing our effects.

34
00:02:45,590 --> 00:02:50,370
Now, the second argument we can use on effects is a callback function.

35
00:02:50,660 --> 00:02:56,630
So this is just a function that's going to be executed when this method has finished.

36
00:02:57,080 --> 00:02:59,900
So in this case, we are taking four seconds.

37
00:03:00,890 --> 00:03:08,270
To hide the button and when this is completely finished, we can pass a function to execute something.

38
00:03:08,480 --> 00:03:14,140
So let's go back there and let's add a second argument to this Hyde method.

39
00:03:14,420 --> 00:03:17,900
So comma and now a function.

40
00:03:23,390 --> 00:03:30,710
So now when this is over, I have a text here that it's hidden at the moment, the ID is hidden text.

41
00:03:31,070 --> 00:03:37,120
If we uncheck this property, we can see that we also have the stacks.

42
00:03:37,130 --> 00:03:42,200
So what we are going to do is after we hide the button, let's show this text.

43
00:03:42,410 --> 00:03:44,060
So let's copy this ID.

44
00:03:52,120 --> 00:03:55,840
And now let's just get this text and show it.

45
00:03:57,250 --> 00:04:04,600
So since we are using it as a callback function, this is only going to be executed when this method

46
00:04:04,600 --> 00:04:07,680
is finished, so let's see how this is going to work.

47
00:04:10,100 --> 00:04:17,240
Refreshing the page, I'm going to click hide, it's going to take four seconds, it's fading now it's

48
00:04:17,240 --> 00:04:22,790
hidden and now we show the text, which is different if we had this code outside here.

49
00:04:28,000 --> 00:04:30,940
Now, let's try again, so let's click hide.

50
00:04:31,850 --> 00:04:36,200
It's still hiding the button, but it already showed the text.

51
00:04:36,440 --> 00:04:38,900
And why is this happening while this is happening?

52
00:04:38,900 --> 00:04:42,580
Because JavaScript is an asynchronous language.

53
00:04:42,770 --> 00:04:49,940
So this means that one operation doesn't have to wait for the previous one to finish to be executed.

54
00:04:50,030 --> 00:04:53,500
We can execute multiple operations at the same time.

55
00:04:53,690 --> 00:05:00,620
So when we click to hide the button, it starts that operation and then it just goes to the next one.

56
00:05:01,650 --> 00:05:09,420
If we don't want this, if we want this second operation to start, the first one to finish, then we

57
00:05:09,420 --> 00:05:11,490
can use it as a callback function.

58
00:05:11,520 --> 00:05:14,370
So this is why we placed it inside here.

59
00:05:21,530 --> 00:05:26,750
And this time it's only going to be executed when this one finishes.

60
00:05:27,200 --> 00:05:32,510
Now let's learn another interesting, in fact, we can use, which is the Torgau.

61
00:05:32,720 --> 00:05:39,810
So the same way we had the Torgau class, we can also use toggle to toggle between height and show.

62
00:05:39,980 --> 00:05:43,150
So this is interesting in an element like this.

63
00:05:43,280 --> 00:05:48,500
So this is just simulating like a frequently asked questions.

64
00:05:49,620 --> 00:05:53,040
S. So if we go to Apple's website.

65
00:05:55,760 --> 00:06:01,270
I think I showed you this once, but let's see it again, let me just go to the iPhone.

66
00:06:01,670 --> 00:06:05,000
Let's see if we can find some frequently asked questions.

67
00:06:05,300 --> 00:06:06,460
Let's go down here.

68
00:06:08,950 --> 00:06:09,720
Not here.

69
00:06:09,910 --> 00:06:11,260
Let's try to.

70
00:06:12,330 --> 00:06:13,050
Buyat.

71
00:06:25,610 --> 00:06:32,150
All right, so here we have a few questions, and as you can see, it is not showing the answers.

72
00:06:35,410 --> 00:06:40,010
Only after I click on it, it's showing if I click it again, it's hiding.

73
00:06:40,060 --> 00:06:48,640
So what this is doing is just using the hide and show method by using the toggle so we can keep toggling

74
00:06:48,640 --> 00:06:51,390
between hiding and showing this element.

75
00:06:51,400 --> 00:06:55,330
And this is exactly what we are going to do in this example.

76
00:06:55,660 --> 00:06:57,190
So let's inspect this.

77
00:06:57,520 --> 00:07:00,660
So here we have this arrow button here.

78
00:07:01,000 --> 00:07:02,710
Let's copy the ID of it.

79
00:07:20,540 --> 00:07:24,080
Let's get a click event to this element.

80
00:07:29,190 --> 00:07:35,500
And now every time we click it, what we are going to do is just toggling this content area.

81
00:07:35,730 --> 00:07:39,690
So here we have an element with the idea of tab content.

82
00:07:45,180 --> 00:07:51,900
So tab content we don't have to control if it's showing or not showing, we can just use the Torgau

83
00:07:51,900 --> 00:07:55,090
method and it is going to do all the work for us.

84
00:07:55,620 --> 00:07:56,760
So saving this.

85
00:07:59,050 --> 00:08:01,490
Refreshing the page when I click here.

86
00:08:01,810 --> 00:08:08,100
Now it's hiding, I click again, it's showing we can keep doing this forever to make it even cooler.

87
00:08:08,620 --> 00:08:16,510
I have a class called Flip, and when you add the flip class to the Targo tab aliment, it is going

88
00:08:16,510 --> 00:08:19,930
to rotate one hundred and eighty degrees.

89
00:08:20,740 --> 00:08:22,870
So I'm just going to simulate it here.

90
00:08:23,140 --> 00:08:24,580
Let's add a class.

91
00:08:27,740 --> 00:08:34,970
Of flip, look what's going to happen with the arrow, so now we just turned it one hundred and eighty

92
00:08:34,970 --> 00:08:35,600
degrees.

93
00:08:35,810 --> 00:08:39,470
So let's also toggle this class every time we click it.

94
00:08:40,670 --> 00:08:44,420
So going back to the code, let's just copy this.

95
00:08:47,790 --> 00:08:51,570
And now the name of the element is Torgau Tab.

96
00:08:55,360 --> 00:09:01,810
And what we want to do with it is just Tokugawa class in the name of the class is Flip.

97
00:09:02,200 --> 00:09:05,800
So if it doesn't have that class, it's just going to add it.

98
00:09:06,070 --> 00:09:11,690
If it already has the class, it is going to remove it, which is exactly what we want in this case.

99
00:09:11,860 --> 00:09:12,850
So saving this.

100
00:09:14,420 --> 00:09:22,370
Going back there, let's try again, and now this is even cooler so we can do this using the hide and

101
00:09:22,370 --> 00:09:27,410
show or torgau methods and we also have a few other methods.

102
00:09:27,410 --> 00:09:30,740
So maybe you just want it to be different.

103
00:09:30,740 --> 00:09:36,680
So instead of just hiding and showing it like this, maybe you just want it to slide up.

104
00:09:37,040 --> 00:09:42,140
So Jake Wari has also some interesting effects that you can use.

105
00:09:42,350 --> 00:09:47,150
So instead of using hide and show, let's try to slide up and slide down.

106
00:09:47,690 --> 00:09:50,450
And in this case, it's just going to do the same thing.

107
00:09:50,450 --> 00:09:55,300
But instead of just hiding and showing there's a sliding effect.

108
00:09:55,610 --> 00:09:58,160
So let's use the slide toggle.

109
00:10:02,140 --> 00:10:03,670
Instead of the Torgau.

110
00:10:04,650 --> 00:10:07,470
Like this, and now let's see the difference.

111
00:10:09,190 --> 00:10:10,260
Let's try again.

112
00:10:11,820 --> 00:10:18,240
And now, as you can see, there's this effect which if I'm not wrong, it's exactly what Apple is using

113
00:10:18,240 --> 00:10:18,550
here.

114
00:10:18,930 --> 00:10:26,030
Yeah, so this is just using the slide effect, which is exactly what we are applying here.

115
00:10:27,800 --> 00:10:31,460
There's also the fade in and fade out.

116
00:10:33,270 --> 00:10:37,640
Which is going to lower the opacity before hiding it.

117
00:10:40,180 --> 00:10:44,560
So, again, let's try the fade toggle to see the difference.

118
00:10:55,490 --> 00:10:59,090
Let's try again, and now you can see that it's fading.

119
00:11:00,620 --> 00:11:02,150
So this is up to you.

120
00:11:03,510 --> 00:11:10,110
In this case, I think the slide Torgau is better for this kind of element, but depending on what you're

121
00:11:10,110 --> 00:11:14,480
doing, maybe the Faid Targo is going to work better for you.

122
00:11:14,520 --> 00:11:20,670
So, as you can see, equerry makes our lives easier because we can do the school things with just a

123
00:11:20,670 --> 00:11:21,870
few lines of code.

124
00:11:22,020 --> 00:11:28,680
Of course, everything that we are doing here would be possible to do in pure JavaScript, but we would

125
00:11:28,680 --> 00:11:32,910
need much more lines of code and some logic.

126
00:11:32,910 --> 00:11:37,570
And with Jake Wari, it's so easy to implement these things.

127
00:11:38,010 --> 00:11:45,330
So before we finish this lesson, I just wanted to say that when we talk about passing the time so like

128
00:11:45,330 --> 00:11:50,370
this, we are passing two thousand milliseconds in January.

129
00:11:50,380 --> 00:11:51,510
You can also use.

130
00:11:52,610 --> 00:12:00,290
The slow and fast words, so maybe if you see some example out there on the Internet, you will see

131
00:12:00,290 --> 00:12:03,800
instead of using milliseconds, using slow or fast.

132
00:12:04,240 --> 00:12:11,030
So just so you know, if you use slow, Jake, where it is going to use six hundred milliseconds and

133
00:12:11,030 --> 00:12:18,030
if you type fast, jury is going to use two hundred milliseconds if you don't type anything.

134
00:12:18,770 --> 00:12:22,550
So most of the times we are not going to type anything like here.

135
00:12:25,260 --> 00:12:28,170
We are just using Torgau, we are just using.

136
00:12:29,780 --> 00:12:37,910
Show, so every time we use these methods without passing any, no jury is using the default value of

137
00:12:37,910 --> 00:12:39,850
four hundred milliseconds.

138
00:12:40,010 --> 00:12:42,610
So I thought it would be interesting to mention this.

139
00:12:43,130 --> 00:12:44,320
So that was all for now.

140
00:12:44,330 --> 00:12:45,740
I'll see you in the next video.