jQuery Animation

If you look at example1.html, you will see that it is a basic web page with links to the jquery library, and a script.js file and some styles. There is a div and some buttons to click to show and hide the div. Create a file called script.js and put it in the folder so the link to the file will work.

We start with our normal document.ready function. We can create a function and attach it to a click handler so that when the hide button is clicked the div hides with normal speed. Try adding these to the script as well.

notice I can replace slow with something really slow, like 5000 milliseconds. I can even pass in something called a "callback" which is function that runs when the animation is complete.

example2.html is really the same page with an extra button. Fading works similarly to hiding and showing. link to the script2.js page. We need our ready function again.

You can probably guess what this will do. and you can guess what these will do. The bottom two will fade to an oppacity from 0 – 1. you can also specify seconds for this one (in milliseconds of course). Plus you can have any of these have a callback as well.

here are some more functions to play with. You can try the callbacks and the milliseconds with these as well.

The animate function lets you create custom animations for elements. You pass it an attribute to modify over time, the amount of time, and you can pass it some basic easing (either swing or linear). You can also pass in callback functions for when it completes.

try adding these last two for the last two buttons. The top one does all three animations at once, the bottom one makes use of the callback feature to call the animations one after another.