Hello and welcome to this jiegu query animations and effects lecture.
Jake Query you can create animations and effects that you can use on a website.
In this select shop we will create a simple animation and so it will be creating a simple animation
show hide and toggle effect is for in effect and a fading.
If I have got my sample web page on the right here and this black box here is a div it's been defined
here in the code editor and have also got a button which has been defined here for the button and the
Dave they have some styling apply to them before you can animates any element you need to define the
position property you need to use the SS tool set the position property because by default or elements
are static so you need to specify a position like fixed reality or absolute position so you must set
that in CSF before you can and limit the limit.
So I have set here have set the position to be absolute for this div Hence I am going to animated so
to an inmate.
This is what I am going to do.
Between the script tag is where the code to an inmate is sort of the first line.
Is this document ready.
The main purpose of the event handler is to prepare the document to make sure the document is in fredi
before the code.
In the edit or in the browser I can execute.
So it's an event handler document to read this.
The next line of code here on line 14 is the button selector I ever touched.
Click event to the button select top so that when the button is clicked on it will do something.
How what the button will do is between this red curly braces.
It would do two things I have said two lines of animation.
The first line will have to define what we we're going to animate and have specified that here.
Indeed in this selectors I'm going to limit the div.
Are you an inmate with the DOT and limit function and then you specify the parameters you want the animation
to perform.
So I have specified here how one needed to move left by 200 pixels and to do it in this law.
Ways you can specify a law you can specify fast.
He can also specify a millisecond value in the next line of codea.
I've also specified took an image to do with using the limit function.
Another told it this time to increase the font size by this amount and also to do slowly so the animation
is going to be in two steps.
The first step when I click on the button it will run through this.
It will morph left 200 pixels in a slow way.
Then it will increase the font size and do it in a slow.
So let's check this out.
So this think I click on the button.
Watch what will happen so it will move.
Yeah upset.
Just a simple animation Let's try that again to from left.
It goes 200 pixels and then increases the font size.
Left or Right.
So this is an example of a simple animation.
Of course you can specifies several lines here for a to do different things.
I've also specified two lines.
You can always specify more.
I just thought I'd show you how this is tancer you can also play around with this and improve on it.
Next I'm going to show you how to create a show hide and toggle effect.
So I've got to do boxier defined here with a div idea.
Idea of div and three buttons which of these Sure hide and toggle up applied stylin to them to make
them easy to identify.
So let's pop over to the script.
This is a script to start by defining the issue we fit.
So the first line of coding.
This is a document that really function is an event handler.
He.
This is out to make sure you documenters load it before running the code in the editor.
So the first line here.
This line of code here is referring to the short nearshore idea here is for this button and I've attached
an event handler which is a quick function to the button which means when I click on the button.
This is what will happen.
The function between the kirtley curly braces the red curly braces.
It will show the Deve I need to do that in a fast way so that is what the show would do.
When you click on this show it all show did leave their necks.
We've got another function here between this calibrates.
I have specified the i d select for this hide button.
So what the bottom will do when it is clicked on it all hide the div to hide the box.
So did Dave is the solectron that we're going to operate on to win this.
Hi this clicked.
It will hide at this rate I 1000 millisecond you can specify slow or fast or you can specify in merely
seconds.
You could also specify for it to swing to 20 to swing out or swing back in.
And finally in this piece of code here we have the toggle which is this toggle button here.
So what happens up a tad.
A quick hand that also 2D toggle when the button is toggle is clicked click handler would perform a
function.
It will show it all.
Toggle the div So it will only do that in this low way.
So if I click on div it will show and hide show and that's what this is so these are the functions that
will use to show and height.
Let's check that out.
So if I click on hide it or hide that and that speed I need to swing away to swing it away.
Click on Sure comes back.
Click on toggle toggle show token hide show.
So this is how you would create a show hide and toggle effect using a query.
Next I am going to show you a slide in effect this slide in effect works similarly to d sure hide and
toggle deal differences there when I click on the button slide up this div bop slide up click slide
down.
Did depok was slide down and this will toggle between sliding up and sliding down.
So again this is a piece of code here.
So we specify the button which is this nothing but an idea.
We attach.
Click event to the button so that listens out for a click when the button is clicked.
It will do this and the operation and it will perform this on the div.
So perform the operation and it did what it will do.
It will slide the div up by 1000 milliseconds.
You can also specify slow or fast in that perimeter.
So that's what that would do in this line of code here again.
Advertise it.
Click handler to this slide dump button so when it is clicked on it will slide down.
I have specified fast and also to do it in the alenia where you can also specify swink or linear and
then the final button which is the toggle button here attached.
Also a click event illis is up for a click.
When the button is clicked it will slide the div to dig a select top.
So let's check this out source.
Click on that slides up click on that slide down click toggle click toggle.
So this is how you would create a sliding effect.
Next I'm going to illustrate the fade in effect.
There are four main types of fading.
You can do.
You can do if fade out if fade in a fade to the feed toggle.
But I'm sure you use an fade out.
So this is the piece of code.
So these boxes here are different.
I have specified a div with dividers here and have also given their missile heads to different colours.
So between this script is the code.
So the first I've got the button here has the one of the select arms and attached the click event to
the button.
So when the button is clicked the following action between the call between B curly braces or will happens
to anything between this curly braces here and this.
They read is it to perform or this task refed first box it will fade out normally.
Second bots will fade that slowly.
Third pods will fade out to a three thousand Milli meters milliseconds followed box will fade out in
1000 milliseconds so that's the day in which they'll fade out.
So let's check so if I click it watched them fade away.
Yeah.
And that figures that's slowly.
So this is how you perform a figured out effect.
If you want to perform if you just replace the code with a dog fit in.
Does fit.
It means you feed the feed the feed the collars to it's 13 or pacitti.
I'll show you an example of feeding.
If I click on the box the box is shifted back in.
So let's click on the box.
This button here and the boxes have faded back in so this is an example of a fit.
I'm going to illustrate a feed toggle So if I click on the button he should feed and toggle see that.
That's a Fed toggle.
Finally I'm going to show you a fade too because I've defined the past city so they'll feet to different
levels the city levels.
Surely between zero and once.
So they all fit in based on your past in the valley.
So these values are specified where you're using phages to.
You need to specify values between 0 and 1.
So these are the values I've specified for the fade effect on the boxes told them to fade slowly and
add this or past value zero point twenty five and so on.
Hence the feed collars they fear they're based on these past city values.
I have specified in this lecture.
We went through some example of how to create an animation.
We did a show and hide and toggle effect a slide in effect and the fade effect.
The chord would be available for download in pdaf so you can play around and experiment with these effects
and animation.
Thank you so much for watching.
Bye for now.