1
00:00:00,660 --> 00:00:06,850
Hello and welcome to this jiegu query animations and effects lecture.

2
00:00:06,960 --> 00:00:14,080
Jake Query you can create animations and effects that you can use on a website.

3
00:00:14,160 --> 00:00:22,770
In this select shop we will create a simple animation and so it will be creating a simple animation

4
00:00:23,310 --> 00:00:28,870
show hide and toggle effect is for in effect and a fading.

5
00:00:28,890 --> 00:00:36,210
If I have got my sample web page on the right here and this black box here is a div it's been defined

6
00:00:36,210 --> 00:00:43,440
here in the code editor and have also got a button which has been defined here for the button and the

7
00:00:43,460 --> 00:00:55,110
Dave they have some styling apply to them before you can animates any element you need to define the

8
00:00:55,110 --> 00:01:03,990
position property you need to use the SS tool set the position property because by default or elements

9
00:01:04,080 --> 00:01:14,640
are static so you need to specify a position like fixed reality or absolute position so you must set

10
00:01:14,640 --> 00:01:19,590
that in CSF before you can and limit the limit.

11
00:01:19,800 --> 00:01:30,060
So I have set here have set the position to be absolute for this div Hence I am going to animated so

12
00:01:30,060 --> 00:01:30,790
to an inmate.

13
00:01:30,810 --> 00:01:32,300
This is what I am going to do.

14
00:01:32,300 --> 00:01:39,240
Between the script tag is where the code to an inmate is sort of the first line.

15
00:01:39,310 --> 00:01:41,730
Is this document ready.

16
00:01:41,790 --> 00:01:49,080
The main purpose of the event handler is to prepare the document to make sure the document is in fredi

17
00:01:49,530 --> 00:01:50,970
before the code.

18
00:01:51,400 --> 00:01:54,840
In the edit or in the browser I can execute.

19
00:01:54,840 --> 00:02:00,340
So it's an event handler document to read this.

20
00:02:00,340 --> 00:02:10,510
The next line of code here on line 14 is the button selector I ever touched.

21
00:02:10,560 --> 00:02:19,130
Click event to the button select top so that when the button is clicked on it will do something.

22
00:02:19,150 --> 00:02:24,300
How what the button will do is between this red curly braces.

23
00:02:24,300 --> 00:02:28,980
It would do two things I have said two lines of animation.

24
00:02:28,980 --> 00:02:35,750
The first line will have to define what we we're going to animate and have specified that here.

25
00:02:35,820 --> 00:02:39,840
Indeed in this selectors I'm going to limit the div.

26
00:02:40,130 --> 00:02:49,020
Are you an inmate with the DOT and limit function and then you specify the parameters you want the animation

27
00:02:49,020 --> 00:02:50,240
to perform.

28
00:02:50,250 --> 00:02:59,730
So I have specified here how one needed to move left by 200 pixels and to do it in this law.

29
00:02:59,730 --> 00:03:03,910
Ways you can specify a law you can specify fast.

30
00:03:04,050 --> 00:03:09,830
He can also specify a millisecond value in the next line of codea.

31
00:03:09,830 --> 00:03:16,170
I've also specified took an image to do with using the limit function.

32
00:03:16,170 --> 00:03:24,510
Another told it this time to increase the font size by this amount and also to do slowly so the animation

33
00:03:24,570 --> 00:03:26,760
is going to be in two steps.

34
00:03:26,760 --> 00:03:30,350
The first step when I click on the button it will run through this.

35
00:03:30,390 --> 00:03:33,540
It will morph left 200 pixels in a slow way.

36
00:03:33,960 --> 00:03:38,400
Then it will increase the font size and do it in a slow.

37
00:03:38,580 --> 00:03:41,700
So let's check this out.

38
00:03:41,970 --> 00:03:44,180
So this think I click on the button.

39
00:03:44,190 --> 00:03:46,270
Watch what will happen so it will move.

40
00:03:46,290 --> 00:03:48,130
Yeah upset.

41
00:03:48,240 --> 00:03:52,350
Just a simple animation Let's try that again to from left.

42
00:03:52,350 --> 00:03:55,860
It goes 200 pixels and then increases the font size.

43
00:03:56,220 --> 00:03:58,200
Left or Right.

44
00:03:58,320 --> 00:04:02,680
So this is an example of a simple animation.

45
00:04:02,700 --> 00:04:08,020
Of course you can specifies several lines here for a to do different things.

46
00:04:08,040 --> 00:04:09,970
I've also specified two lines.

47
00:04:09,990 --> 00:04:11,830
You can always specify more.

48
00:04:12,030 --> 00:04:19,600
I just thought I'd show you how this is tancer you can also play around with this and improve on it.

49
00:04:19,600 --> 00:04:26,230
Next I'm going to show you how to create a show hide and toggle effect.

50
00:04:26,310 --> 00:04:31,300
So I've got to do boxier defined here with a div idea.

51
00:04:31,860 --> 00:04:41,430
Idea of div and three buttons which of these Sure hide and toggle up applied stylin to them to make

52
00:04:41,430 --> 00:04:43,250
them easy to identify.

53
00:04:43,350 --> 00:04:46,270
So let's pop over to the script.

54
00:04:46,500 --> 00:04:52,210
This is a script to start by defining the issue we fit.

55
00:04:52,380 --> 00:04:54,730
So the first line of coding.

56
00:04:54,750 --> 00:04:59,170
This is a document that really function is an event handler.

57
00:04:59,250 --> 00:04:59,710
He.

58
00:04:59,870 --> 00:05:06,170
This is out to make sure you documenters load it before running the code in the editor.

59
00:05:06,620 --> 00:05:09,030
So the first line here.

60
00:05:09,030 --> 00:05:19,940
This line of code here is referring to the short nearshore idea here is for this button and I've attached

61
00:05:20,120 --> 00:05:29,420
an event handler which is a quick function to the button which means when I click on the button.

62
00:05:29,630 --> 00:05:31,160
This is what will happen.

63
00:05:31,250 --> 00:05:35,990
The function between the kirtley curly braces the red curly braces.

64
00:05:36,050 --> 00:05:44,370
It will show the Deve I need to do that in a fast way so that is what the show would do.

65
00:05:44,390 --> 00:05:48,480
When you click on this show it all show did leave their necks.

66
00:05:48,480 --> 00:05:53,620
We've got another function here between this calibrates.

67
00:05:53,870 --> 00:05:59,950
I have specified the i d select for this hide button.

68
00:06:00,410 --> 00:06:07,850
So what the bottom will do when it is clicked on it all hide the div to hide the box.

69
00:06:07,970 --> 00:06:12,220
So did Dave is the solectron that we're going to operate on to win this.

70
00:06:12,230 --> 00:06:13,370
Hi this clicked.

71
00:06:13,370 --> 00:06:23,680
It will hide at this rate I 1000 millisecond you can specify slow or fast or you can specify in merely

72
00:06:23,690 --> 00:06:25,210
seconds.

73
00:06:25,310 --> 00:06:32,930
You could also specify for it to swing to 20 to swing out or swing back in.

74
00:06:33,140 --> 00:06:40,150
And finally in this piece of code here we have the toggle which is this toggle button here.

75
00:06:40,400 --> 00:06:42,350
So what happens up a tad.

76
00:06:42,380 --> 00:06:50,510
A quick hand that also 2D toggle when the button is toggle is clicked click handler would perform a

77
00:06:50,510 --> 00:06:51,520
function.

78
00:06:51,680 --> 00:06:53,160
It will show it all.

79
00:06:53,170 --> 00:06:58,560
Toggle the div So it will only do that in this low way.

80
00:06:58,580 --> 00:07:08,150
So if I click on div it will show and hide show and that's what this is so these are the functions that

81
00:07:08,150 --> 00:07:10,320
will use to show and height.

82
00:07:10,320 --> 00:07:12,100
Let's check that out.

83
00:07:12,110 --> 00:07:20,960
So if I click on hide it or hide that and that speed I need to swing away to swing it away.

84
00:07:20,990 --> 00:07:23,060
Click on Sure comes back.

85
00:07:23,060 --> 00:07:32,270
Click on toggle toggle show token hide show.

86
00:07:32,600 --> 00:07:40,770
So this is how you would create a show hide and toggle effect using a query.

87
00:07:41,060 --> 00:07:49,220
Next I am going to show you a slide in effect this slide in effect works similarly to d sure hide and

88
00:07:49,220 --> 00:07:56,360
toggle deal differences there when I click on the button slide up this div bop slide up click slide

89
00:07:56,360 --> 00:07:56,650
down.

90
00:07:56,650 --> 00:08:01,440
Did depok was slide down and this will toggle between sliding up and sliding down.

91
00:08:01,610 --> 00:08:04,440
So again this is a piece of code here.

92
00:08:04,790 --> 00:08:10,810
So we specify the button which is this nothing but an idea.

93
00:08:11,120 --> 00:08:12,200
We attach.

94
00:08:12,230 --> 00:08:18,310
Click event to the button so that listens out for a click when the button is clicked.

95
00:08:18,350 --> 00:08:23,560
It will do this and the operation and it will perform this on the div.

96
00:08:23,840 --> 00:08:26,990
So perform the operation and it did what it will do.

97
00:08:27,080 --> 00:08:31,610
It will slide the div up by 1000 milliseconds.

98
00:08:31,610 --> 00:08:35,960
You can also specify slow or fast in that perimeter.

99
00:08:36,200 --> 00:08:40,430
So that's what that would do in this line of code here again.

100
00:08:40,460 --> 00:08:41,460
Advertise it.

101
00:08:41,480 --> 00:08:48,100
Click handler to this slide dump button so when it is clicked on it will slide down.

102
00:08:48,200 --> 00:08:58,160
I have specified fast and also to do it in the alenia where you can also specify swink or linear and

103
00:08:58,160 --> 00:09:02,330
then the final button which is the toggle button here attached.

104
00:09:02,330 --> 00:09:06,240
Also a click event illis is up for a click.

105
00:09:06,320 --> 00:09:11,040
When the button is clicked it will slide the div to dig a select top.

106
00:09:11,150 --> 00:09:13,180
So let's check this out source.

107
00:09:13,190 --> 00:09:21,610
Click on that slides up click on that slide down click toggle click toggle.

108
00:09:21,710 --> 00:09:26,800
So this is how you would create a sliding effect.

109
00:09:26,820 --> 00:09:30,920
Next I'm going to illustrate the fade in effect.

110
00:09:30,920 --> 00:09:33,770
There are four main types of fading.

111
00:09:33,800 --> 00:09:34,490
You can do.

112
00:09:34,490 --> 00:09:41,890
You can do if fade out if fade in a fade to the feed toggle.

113
00:09:41,950 --> 00:09:44,960
But I'm sure you use an fade out.

114
00:09:44,960 --> 00:09:46,800
So this is the piece of code.

115
00:09:46,850 --> 00:09:49,340
So these boxes here are different.

116
00:09:49,480 --> 00:09:57,080
I have specified a div with dividers here and have also given their missile heads to different colours.

117
00:09:57,130 --> 00:09:59,730
So between this script is the code.

118
00:10:00,230 --> 00:10:08,660
So the first I've got the button here has the one of the select arms and attached the click event to

119
00:10:08,660 --> 00:10:09,500
the button.

120
00:10:09,560 --> 00:10:18,170
So when the button is clicked the following action between the call between B curly braces or will happens

121
00:10:18,180 --> 00:10:22,660
to anything between this curly braces here and this.

122
00:10:22,820 --> 00:10:31,190
They read is it to perform or this task refed first box it will fade out normally.

123
00:10:31,190 --> 00:10:33,550
Second bots will fade that slowly.

124
00:10:33,740 --> 00:10:42,170
Third pods will fade out to a three thousand Milli meters milliseconds followed box will fade out in

125
00:10:42,170 --> 00:10:46,060
1000 milliseconds so that's the day in which they'll fade out.

126
00:10:46,070 --> 00:10:49,260
So let's check so if I click it watched them fade away.

127
00:10:49,460 --> 00:10:50,130
Yeah.

128
00:10:50,510 --> 00:10:51,930
And that figures that's slowly.

129
00:10:52,130 --> 00:10:55,620
So this is how you perform a figured out effect.

130
00:10:55,790 --> 00:11:00,910
If you want to perform if you just replace the code with a dog fit in.

131
00:11:00,970 --> 00:11:01,760
Does fit.

132
00:11:01,860 --> 00:11:08,200
It means you feed the feed the feed the collars to it's 13 or pacitti.

133
00:11:08,210 --> 00:11:10,350
I'll show you an example of feeding.

134
00:11:10,370 --> 00:11:13,890
If I click on the box the box is shifted back in.

135
00:11:19,460 --> 00:11:21,140
So let's click on the box.

136
00:11:21,140 --> 00:11:27,680
This button here and the boxes have faded back in so this is an example of a fit.

137
00:11:28,010 --> 00:11:35,860
I'm going to illustrate a feed toggle So if I click on the button he should feed and toggle see that.

138
00:11:38,870 --> 00:11:40,670
That's a Fed toggle.

139
00:11:40,870 --> 00:11:48,400
Finally I'm going to show you a fade too because I've defined the past city so they'll feet to different

140
00:11:48,400 --> 00:11:50,410
levels the city levels.

141
00:11:50,440 --> 00:11:53,510
Surely between zero and once.

142
00:11:54,150 --> 00:11:58,750
So they all fit in based on your past in the valley.

143
00:11:58,750 --> 00:12:03,250
So these values are specified where you're using phages to.

144
00:12:03,450 --> 00:12:06,820
You need to specify values between 0 and 1.

145
00:12:06,910 --> 00:12:13,730
So these are the values I've specified for the fade effect on the boxes told them to fade slowly and

146
00:12:13,800 --> 00:12:17,760
add this or past value zero point twenty five and so on.

147
00:12:17,790 --> 00:12:23,920
Hence the feed collars they fear they're based on these past city values.

148
00:12:23,920 --> 00:12:27,430
I have specified in this lecture.

149
00:12:27,550 --> 00:12:32,510
We went through some example of how to create an animation.

150
00:12:32,710 --> 00:12:38,600
We did a show and hide and toggle effect a slide in effect and the fade effect.

151
00:12:38,750 --> 00:12:46,210
The chord would be available for download in pdaf so you can play around and experiment with these effects

152
00:12:46,260 --> 00:12:47,400
and animation.

153
00:12:47,470 --> 00:12:49,120
Thank you so much for watching.

154
00:12:49,120 --> 00:12:50,010
Bye for now.