jQuery Crash Course [4] - Effects and Animation

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 will give us an ID of BTN fade out okay and then let's just copy that paste into more this one's going to be fade in and then this one's going to be fake tog all right 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 H R 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 I'll just put an h1 it says hello world and then up in the style we're going to say dot box or actually it's an ID so we're going to say number sign 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 or 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 240 pixels and let's text the line to the center alright so let's go ahead and load that 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 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 dot fade out 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 sets some pretty high limitations so instead of doing fast or slow you can actually do it in milliseconds so let's say 3,000 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 I'll change it to I will say it's gone okay so reload click it and then when it's done you'll see the text changes - it's gone ok what that function is optional so we have fade-out and then we obviously I 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 fade in and I'm going to get rid of the second callback function we don't need it all right so we'll fade it out ok 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 tahg which is going to call fade toggle and we'll just change this to one second okay so now if I click that goes out click it again comes back in and keep doing it alright so those are the fade effects now we also have slide up and slide down and slide toggle so what I'm going to do is copy the these all the buttons and let's change this to button 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 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 slide down okay then I'll copy that this one will be up this one will be cog and toggle all right 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 actually we need to do our click okay and then we'll take that box and up and I'm just gonna call dot stop all right 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 now let's get into animate all right now what I'm going to do is create another box let's see we're going to go put an HR right here and then I'm going to put a couple more buttons I need three buttons so I'm gonna copy those okay this first one will be I will 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 box too okay we're just going to add a little bit of style up here to box two 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 all right and then let's save that okay so there's our square 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 blocks too 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 all right 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 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 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 oh it's move right endure all right 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 zero so now move right move left and now I can move that around just pretty cool now we can add some other values here if we want let's say we want to change the size of the box as it moves to the left or to the right so right here we'll say height you can basically animate anything that has either a numeric value or a string that is light as numeric like so something like 500 pixels which is what we're going to have here it's a string that will make it 300 pixels all right 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 all right now when it comes back we want to bring that stuff back so let's do height bring it back to 100 pixels and with the same thing and opacity we'll set that to 1 so let's try that 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 all right so that's animate now we can also use a cue where we can do multiple animations at once so what we're going to do is grab that move around button okay don't click function and we're going to we're going to put that box to value into a variable because we're using it multiple times so we don't want to have to keep reaching into the dog so set that to box two and then what we'll do is say box dot animate and we'll pass in 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 is 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 zero all right and then the last one is 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 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

Channel: Traversy Media

Views: 105,477

Keywords: jquery, jquery animation, jquery animate, jquery fade, jquery slide

Id: kVc_XfZY0vI

Length: 15min 4sec (904 seconds)

Published: Sun Sep 18 2016