Using the show/hide methods of jQuery are an easy and simple “animate” elements and appearing. This is beneficial when you want to expand options when a user selects a certain part on a form, or for accordion controls.
However, the show/hide methods are instantaneous. Sometimes it is nice to move them in/out with an animation so the transition is not jarring.
$('#firstName').onclick(new function() {
$('#firstNameHint').fadeToggle();
}
Of course there are several other ways to make elements appear. Such as slideUp(), slideDown(), and slideToggle();
You can also create more custom elements, with the animate function.
In the animate function, you need to define what you want to animate, and for how long. You can optionally choose to perform a function when it is done. For example:
$('#box').animate(
{
left: '+=50'
},
500,
function() {
// do something when the animation completes... maybe
// this part is optional
}
};
When this code is executed, it will move an element, with the id of “box” to the left, 50 pixels. You could have several other similar calls to move the box up, down, and right as well, if you wanted to.
You can learn more about jQuery effects at: http://api.jquery.com/category/effects/
Intro to jQuery Animation was originally found on Access 2 Learn
