Alright, let's talk about animations.
In jQuery.
We can animate certain things and we can not animate certain things.
So anything that has a number value we can animate.
So a width of 500 and for example,
is a number value.
And we can add inmate that down to
four hundred and three hundred and ten hundred if we wanted to.
A color is not necessarily a numbered is a mix of numbers and letters.
It's like black is 000000 or F,
F, F, F, F, F, And that's white.
We could do an off-white F5, F5, F5.
And a computer simply just doesn't really know, you know,
natively how to scroll this up to F,
F, F, F, F, F, or down to 000000.
But if you have a width of 500, well,
that's just simply decrementing the you could change it from 500 to 400 by going to 499,
then 498487 for 9645,
et cetera, et cetera, et cetera.
There is a linear order of operations here.
So let's go ahead and animate our box.
So when we click this button,
we've got a button up here that says Click Me, registered, click event.
Let's select that box and animate it.
So we could do something like dot box animate.
And this is going to take an object.
And so in here we can say
the opacity is currently it's one we could change that to Lake is
0.5. the width is currently set to 100 pixels.
And just because it says pixels doesn't mean it doesn't know
how to work with a number and knows how to split this and say,
okay, the width is currently a 100,
and it's also pixels.
So let's change that to five hundred,
five hundred pixels because we need the measurement in there.
Let's go ahead and refresh.
And it animates nicely.
It's nice and smooth and works perfectly for us.
And if we wanted to, we could slow this down as well.
We could say animate this over four seconds or 4 thousand milliseconds.
And it takes its time, just like that.
Now what's not going to work is if we wanted to change
that background color, background color.
If we wanted to change my background color to blue,
it simply doesn't know how to go from black to blue link.
What is the the definition or what
is the function or what is the linear logic behind changing one color to another color?
Making it look animated.
Like does it go from black to red to blue
or from black to purple to blue or from black to white to blue.
Like a computer just doesn't know that.
But a computer knows how to work with hard numbers quite easily.
So we're going to see that changing the background color here
to blue is simply not going to work.
It's going to fade out.
It's going to be a gray.
That's absolutely not blue though.
Your task for this lesson is to select an element and animate it.
We can get rid of that.
You can give it an object with what you want to change to Ed's value.
So width, height, capacity, anything like that.
Even your font size if you wanted to.
And then give it some sort of duration.
How long should this take? For me?
I said it should take four seconds for you.
Maybe you wanted to take 1 second or 20 seconds,
or maybe you want it to change to be completely see-through.
By time it gets you a 100% and this should take five seconds,
will give you something like that to,
this is one of those times where it's good to
have some fun just to tinker around with it.
And, you know, you don't have to do anything in particular.
You just need to make sure that it changes something with a numeric value.
And again, we're using CSS here.
Javascript, CSS, and HTML all work very well together.
They're all designed to work with each other.
And also keep in mind,
you can only work with actual hard numbers.
100% is a number,
blue is not a number.
Go ahead and have some fun with that in the next couple of lessons,
let's talk about Width dimensions and height dimensions.