All right so since my favorite thing to do with a query is animation I want to go through a couple of
different animation options here.
You can kind of pick up from and hopefully once you kind of understand the basics of it you can apply
to all different things and do all different things with it.
It's just there's so many doors that this is going to open up.
I'm going to go through a couple of different options here before we move on.
So let's start out a new document.
What men do is four different things.
I want to create a button that says grow one this is move when this is bigger and one has as many things
spread to four different things with these very basic animation options here.
So within our script at the top here opens up the same it always does.
I mean to create a new javascript Arjay create option if your dollar sign.
Open Prendes open quotes and then we say the first one of a target is the first go down here and that's
going to be an ID of growth.
Keep it simple.
FLATOW 1 put in there right now.
Eco's girl.
OK.
So they grow here and do a event handler somewhere and say Click do something and when I do a function
and then within a function they're going to open and close the set of friends in the open set of curly
brackets.
And here with them the function is we wanted to create a new J.A.G. option here and say dollar sign
Prendes and point to us True's here.
It's a text box which went.
This text box area down here the ID.
Let me put that pound sign in there is text box and we can do is one of animi.
So this is A-G query options will see animate and what we do with that room do a click a function and
opening the Prendes.
All of the curly brackets.
I can think of time want to kind of keep on one line here.
So within those curly brackets would be easier to see if I do it this way.
But then there want to write all the parameters they want for the animation.
And we're kind of basically using CSSA are got to look slightly different but it's not like very similar
at the same time.
So animate them as open close curly brackets here just like it would with kind of like with the style
sheet is a mess say the width and make this one engrosses they change the width to 500 pixels wine.
But it is the one difference right there is that with J.Crew you need to put that in quotes there.
And that I can still say how what the duration is and how fast or slow I want this to work so I can
say over the course of two seconds or two thousand milliseconds I did make one error there won't change
that right now.
So after the quote you can and you close that bracket right there because that's the end of our style
so to the curly brackets they come say you with the duration and the number.
And when I go ahead and close that guy right there.
So that is all that you need for the very first one here and I'm in the antique closing corner right
there.
So this actually should work right now although I haven't really added a style sheet to see how this
is going and the style right now of kind of create a text box so that it's a defined box size and not
just some you know huge goes for width kind of thing or we're never going to see it actually grow.
So what I do is target my box down in here I can see that the idea of text box.
So when I copy that then my style area right here is a text box and in the same opening close curly
brackets.
Now I can simply give it a UPS and I spell it right with oh say 200 pixels.
Keep it simple height of 200 pixels just so we can actually see it's the
background color was a well light gray there and
you know it's an absolute position so same position.
And will also say margin tops kind of get the buttons a little bit there was say 20 pixels.
Keep it simple.
All right.
So that's one test that one out.
Real quick I must say this document and then open up animation in my browser here.
So here's my box all gray with the text in it not a click and grow.
You see that box just kind of grew wide and expanded right there.
So let's go ahead do the other three real quick here.
Going to say move bigger and many things these are all basically the same as Grossmont apply some different
styles to them and you'll see them talking about here.
So now they've got that machine to copy.
That's an interesting time.
Just go ahead and paste that bag in right here.
Now I created another button called MOVE.
So it's going give it an ID of move and they can change this one to move and keep all the same stuff
right here except instead of with say the branch on the left.
Now looks kind of like CSSA except that would normally not be camel case there would be a dash in there
but very similar.
I must say move lact symbol 200 pixels to the left and do that over the course of one second.
So when the copy that Seram save it match my document.
This should be good to move.
So you can see that the guy has moved over there a little bit.
Nice easing and everything is all built into the query.
Now let's go and copy that one again.
And when they to call the third one here is called Thurmon bigger.
So go ahead I give the idea of bigger and I mean to say bigger there same functions and click function
same targeting that text box a game or an animated and instead of moving at various saves make the fonts
as 200 pixels definitely say 40 pixels and we do that over the course of three seconds save that.
Come on back to our browser hit refresh click on bigger and there's my text just expanding out the box
was fixed to a fixed size root there so the text had to kind of go behind it.
So what you can do about that.
But now I can still move everything over and I make the text box grow that kind of help the text fit
better with it in there.
So those are a couple different things that you can see that did kind of ease.
There was some nice smooth motion to it.
Again it's all part of Jake Query.
It's going to do one more before we wrap this one up on my copy of that.
And I do want to call this one many things.
So go ahead and get an ID of many.
When I come back here Id many Now just to kind of show you that we can do all sorts of things within
here.
I can see font size of 400.
I can also get a comma and say margin helps keep think and CSSA.
Laughed left of 400 pixels or a comma.
We can see with took them which they do have 600 pixels.
Crazy.
And we do that over a course of two seconds sort of there.
So maybe this is a brand new one that's used just on its own game retargeting many say that come on
back and it refresh.
And many thanks to all those things it wants there.
So it is slanted over making the text larger.
And the thing I had to do change the width margin left and the font size so that all those things in
one.
So a lot of cool things you can do with the animation function within Jay queery.