Made withjQueryTutorial

jQuery Crash Course [4] - Effects and Animation

T

Traversy Media

Creator on the jQuery channel

Watch on YouTube ↗

132K viewsSep 18, 201615:04 runtime

Learn to create dynamic user interface effects and animations with jQuery in this practical crash course. This tutorial introduces fundamental jQuery methods for visual effects, including fadeIn, fadeOut, and fadeToggle to control element visibility. You'll also master…

Chapters

#jquery#tutorial#frontend

Key Concepts in jQuery Effects & Animation

This document summarizes the core methods for creating visual effects and animations in jQuery.

Fade Effects

Fade effects control the opacity of an element to show or hide it smoothly.

$.fn.fadeOut(): Hides an element by fading it to transparent.
$.fn.fadeIn(): Displays an element by fading it to opaque.
$.fn.fadeToggle(): Toggles between fadeIn() and fadeOut().

Slide Effects

Slide effects animate the height of an element to create a sliding motion.

$.fn.slideUp(): Hides an element with a sliding-up motion.
$.fn.slideDown(): Shows an element with a sliding-down motion.
$.fn.slideToggle(): Toggles between slideUp() and slideDown().

Controlling Animations

Most effect methods can be customized with speed parameters and callbacks.

Speed: Pass a string ('fast', 'slow') or a number in milliseconds (e.g., 3000 for 3 seconds) as the first argument.
```
// Fades out over 3 seconds
$('#box').fadeOut(3000);
```
Callback Function: Pass a function as the last argument. It will execute after the animation completes.
```
$('#box').fadeOut('slow', function() {
  alert('The box is now hidden!');
});
```
Stopping Animations: The .stop() method can be called on an element to halt its current animation immediately.

Custom Animations with `.animate()`

The .animate() method performs a custom animation of a set of CSS properties.

Basic Syntax: The method takes an object of CSS properties to animate.

// Moves the element to 500px from the left
$('#box2').animate({ left: 500 });

Important
For positional animations (top, right, bottom, left) to work, the element's CSS position property must be set to relative, absolute, or fixed.

Animating Multiple Properties: You can animate multiple properties at once by including them in the object.
```
$('#box2').animate({
  left: 500,
  height: '300px',
  width: '300px',
  opacity: 0.5
});
```

Queuing Animations: Chaining multiple .animate() calls on the same element creates an animation queue. Each animation will run in sequence.

$('#box2')
  .animate({ left: 300 })       // Move right
  .animate({ top: 300 })        // Move down
  .animate({ left: 0 })         // Move back left
  .animate({ top: 0 });         // Move back up

Initial HTML & CSS Setup

Alright, so in this video we're going to get into effects and animation in jQuery. Now we're not going to create any spectacular animations, I just want to introduce you to the fade, fade out, fade in, slide up, slide down, and then the animate function, okay? And maybe a couple other small things. So we have our starter interface here and what I'm going to do is I'm going to create a couple buttons in the container.

So we'll say button, we'll give this an ID of BTN Fade Out, okay? And then let's just copy that, paste in two more. This one's going to be fade in, and then this one's going to be fade tog. Alright so we have our buttons. Now we're also going to, let's see, we're going to create a div. We'll put an HR here and then a div and we're going to give this an ID of box and inside the Box we're going to say, we'll just put an H1 that says hello world. And then up in the style we're going to say #box and let's give it a background of dark gray, color will be white. And let's see, we're going to set the width, what do I want the width to? We'll set the width to 500, okay, 500 pixels. And then the height I'm going to set to 90 pixels. I'm going to set padding to 40 pixels, and let's text align to the center. Alright, so let's go ahead and load that.

Implementing Fade Effects

So now we have our buttons and we have this element here which is a box with the text hello world. So what I want to do first is take this Fade Out button and add an event to it. So we're going to say jQuery ID BTN Fade Out. It's going to be a click event. When it's clicked it's going to run this function and then what we're going to do is take that box, okay, so it has an ID of box, and we're going to say .fadeOut() okay? So let's see what that does. And it just nicely fades it right out.

Okay, so if you want that to go fast, you can actually pass in a parameter here called 'fast'. Click it, it goes fast. If we change this to 'slow' and then it goes a little slower. Now that's, that's set some pretty high limitations. So instead of doing fast or slow you can actually do it in milliseconds. So let's say 3000 which would be 3 seconds. Click it and you'll see it takes 3 seconds to fade out.

Now this also takes in a callback function, an optional function that can do something when it's done. Alright, so what I'm going to do is I'm going to take the button Fade Out, so ID button Fade Out and I'm going to change the text. We'll change it to, we'll say it's gone. Okay, so reload, click it, and then when it's done, you'll see the text changes to it's gone. Okay, but that function is optional.

So we have fade out, and then we obviously also have fade in. So I'm going to copy this here and we'll change this to in, change the actual function or method to fadeIn(). And I'm going to get rid of the second callback function, we don't need it. Alright, so fade it out, okay, it's gone. Click fade in and it comes back in.

Now we also have fade toggle which does both. So we'll go ahead and copy that and let's say fade tog which is going to call fadeToggle and we'll just change this to one second. Okay, so now if I click that, goes out, click it again, comes back in, so you can keep doing it. Alright, so those are the fade effects.

Implementing Slide Effects & Stop

Now we also have slide up and slide down and slide toggle. So what I'm going to do is copy these all the buttons, and let's change this to button, uh let me see, I want to change this to slide up. Okay, so button slide up. This one will be slide down and this one will be uh slide tog. Okay and then we're going to go down here and let's just grab this. Okay, we'll change this to button slide down, and then this will be changed to slideDown. Okay, then I'll copy that. This one will be up, this one will be togg, and toggle. Alright, so let's reload, click slide up, you can see it slides up and disappears. And slide down and slide toggle.

Alright now we can also stop it in the middle of the effect if we want. So what I'm going to do is put another button right here, give it an ID of BTN stop. And then down here we're going to say BTN stop and then we're going to simply, uh actually so we need to do our click. Okay, and then we'll take that box and we're just going to call .stop(). Alright, so now we'll go ahead and click slide up, stop, and you'll see it stops dead in its tracks. And then we can continue it. Alright, so that is fade and slide.

Setting Up for Custom Animations

Now let's get into animate. Alright now what I'm going to do is create another box. Uh let's see, we're going to go, let's put an HR right here and then I'm going to put a couple more buttons. I need three buttons so I'm going to copy those. Okay, this first one will be, uh we'll just call it move left. This one will be move right. This one will be move around. Alright, and then under that we're going to have another div with a ID of box2. Okay, we're just going to add a little bit of style up here to box2. So we're going to give it a background of red, give it a width of 100 pixels, a height of 100 pixels, and we're also going to set the position to be relative. Alright, and then let's save that. Okay, so there's our square.

Custom Animations with .animate()

and we're going to go down into our script and we're going to take that move right button. So it has an ID of move right and we're going to set a click event. Okay, and then in here we're going to take box two and we're going to apply the animate method. Okay and then in here we're going to pass in an object with some options so I want to say left: 500. Alright, now what this is going to do is it's going to add this CSS property left 500. Now if you have to make sure it's relative or that the top, right, left, those values won't work unless it's position relative. So what we're saying is when we click it we want it to be 500 from the left. Okay, this is where that the left is. We want it to go 500 from the left which would be towards the right. So if we go ahead and reload and I click move left, nothing's happening. Um, oh it's move right, duh. Alright, so you can see that it moved right.

Now we want to be able to move it back. So we'll copy that, we'll take the move left button and we'll say left: 0. So now move right, move left, and now I can move that around which is pretty cool. Now we can add some other values here if we want. Let's say we want change the the size of the box as it moves to the left or to the right. So right here, we'll say height and you can basically animate anything that has either a numeric value or a string that is like is numeric, so something like 500 pixels, which is what we're going to have here. Let's um, 300 pixels. Alright and then we'll set the width also to 300 pixels. Okay, we can also set the opacity because that's numeric, so we'll set that to 0.5. Alright now when it comes back we want to bring that stuff back, so let's do height, we'll bring it back to 100 pixels, and width same thing, and opacity we'll set that to one. So let's try that. I'm going to close that. And you can see it gets bigger and it also gets more transparent. And then move left and it goes back to how it was. Alright, so that's animate.

Queuing Animations & Conclusion

Now we can also use a queue where we can do multiple animations at once. So what we're going to do is grab that move around button. Okay .click(), function, and we're going to, we're going to put that box two value into a variable because we're using it multiple times so we don't want to have to keep reaching into the DOM. So set that to boxTwo and then what we'll do is say box.animate() and we'll pass in, uh let's say left: 300. Okay, we'll copy that and we can keep doing animates. So that'll be left 300, this one will be, let's do top 300. Okay, first one's going to be over, and then we want top 300 so that's going to go down. Then we want it to go back over, so for that one we'll set top: 300 and left: 0. Alright, and then the last one's going to be left: 0, top: 0, okay, back to where it started.

So let's go ahead and try that. Click the move around and it goes around in a circle or a square. Okay, so like I said, I mean we're not going to do any really extensive stuff with animation, I just want to show you how these methods work and you can use that to go and create your own whatever, slideshows, or whatever you want to build that uses animation. Alright, so hopefully you guys like this video. In the next video we're going to start to look at some Ajax methods so that we can use Ajax with jQuery.