All language subtitles for 184 Website Animations with jQuery.en_US

Now jQuery also makes it really easy to implement some common animations that you might want to do when

you're creating your web site.

So let's head into Atom, and inside our index.js at the moment

we’ve got a click listener on all of our buttons that changes our h1 CSS to the color purple.

Now if we were to delete this method, so instead of using .css we use something like .hide,

and this method is an animation that will hide the selected element.

So when we click any button in our web page it should try and hide the h1.

So let's see what that looks like.

Let's refresh the page and you can see that our h1 disappears when I click on any of the buttons.

Now if we wanted to show that h1 instead, we would have to select our h1 and say .show.

And that will make it reappear.

Now if instead of only making our h1 hide and disappear forever, we wanted to toggle the hide and show,

then we can simply say toggle.

So now when I click on any button it'll hide my h1.

And then when I click on any other button it will show my h1. And I can toggle it's appearance

by clicking on my buttons.

Now hiding is a very sudden kind of event.

It disappears and the element gets removed from the flow of our HTML, so everything else moves up.

And this is a very sudden sort of disappearance and appearance.

Now if we wanted that to be a little bit more progressive then we can use something called fadeOut instead.

And you can see that when I click now it’ll reduce the opacity of my selected element, and then it

will hide it.

And of course fadeOut has its related opposite which is fadeIn, and that will make our h1 appear

and also fade into full opacity.

Now all of these methods come with a toggle option, so fadeToggle will allow our buttons to fade out, then

fade in, then fade out.

I can do this all day long.

All right.

So in addition to fading and hiding you can also use a slideUp and slideDown.

And what this does is it kind of just collapses our element that was selected, and slide down

will just uncollapse that element. And again slideUp comes with slideToggle.

So this will just slide up, slide down, slide up, slide down, and this can be really useful if you have

something like a drop down menu for example.

Now if you wanted more fine grained control over your animations then instead of using these pre-built

ones you can use something called .animate.

And this allows you to define some custom

CSS that you want to gradually animate towards. So inside the parentheses we can insert a set of curly

braces, and inside the curly braces we're going to add our new CSS rule that we're going to animate to.

So, for example, I can change the opacity of my selected element to only 0.5,

so 50 percent of its previous value.

So now if we hit save and refresh and I click on one of these buttons you can see that my element just

got a lot more transparent, and it might be a little bit easier if I changed the color to something a bit

more easy to see like say purple.

You can see that clearly makes the opacity much much lower.

Now the thing to remember about the animate method is that in between the curly braces you can only

add the CSS rules that have a numeric value.

So that means that you can’t animate to something like a color,

right?

You can't change the color to red.

And when I run this you can see that we get an error.

Red is not defined.

And this is because it's very difficult to create that kind of tween animation that gradually progresses

from one style to another using the animate method.

So you have to stick to things that have a numeric value.

For example a margin of 20 pixels, that it can do.

Or if you wanted to make it a percentage, then you can include it as a string.

So 20 percent margin which makes it much bigger.

But essentially make sure that this second value in the CSS that you're trying to animate to is a number

value.

Now if you wanted to have more than one of these animations happening then you can chain them together.

So what do I mean by chaining?

So for example if we wanted our h1 to slide up,

but then after it slid up, I then want it to slide down, and after it slid down I want to change the CSS

to have an opacity of 0.5,

so 50 percent.

So essentially what we've done here is chained

three methods together so that we target our h1 and first get it to slide up, then slide down, then

animate.

Now remember that if this is all targeting the same thing it can't slide up and slide down at the same

time.

So it will do it in order.

So let's check it out.

Slide up, down and change opacity.

So that's pretty cool, right?

And if you're worried right now that you can't remember what all of these methods are called or how

to use them then don't worry.

As programmers we try to save the sacred space that is our brain.

So never try to remember or memorize anything.

That's not what it's about.

Essentially for me programming is basically like an open book exam, and nobody memorizes things for open

book exams, right?

You just try to understand what's going on because remember that there is always the documentation and

the whole world wide web out there to help you in the exact moment that you need the information. You

just need to know that they exist and roughly what they were called or what they're able to do.

So for example if we couldn't remember how to use slideUp, then we could search for something like,

so we know it's about jQuery,

and we know that it was an animation, and we know that we needed to slide something, right?

So let's hit enter.

And you can see that we've already got access to our slideDown event.

And if we looked a little bit further upstream than we can see all of our effects: animate, delay, fadeIn,

fadeOut, fadeTo.

And this is the jQuery documentation which is searchable on here, on jquery.com, but it's actually

much easier to just search through Google, because it gives you the most relevant results, and it might

give you the W3 Schools or the MDN,

but jQuery is extensively documented.

And even if it's not in the documentation, somebody would have already asked a question on Stack Overflow,

or somebody will be able to help you on Stack Overflow with your questions.

So never memorize.

Always remember that all the resources that you need are just a few keystrokes away.

Now I hope you're ready for a challenge because I've got a big challenge for you.

This is definitely a boss level

fight. Now we're going to create a game using jQuery, and in the process you'll be able to consolidate

what we've learned in this module and reassure yourself that you've absorbed all of this information.

So once you’re ready, head over to the next module.