IT:AD:JQuery:Amimations
ToDo
Prerequisites
There are only two easings built into the basic JQuery. You need to download a plugin from here to add more cool easing effects.
Summary
A fun thing to animate one or more attribute of an element over time using the JQuery animate method (API):
.animate(
propertiesMap //{key:value,...}
[, duration] //slow|fast|xxx milliseconds
[, easing] //[swing|linear]
[, complete] //callback once a single prop animation is complete. Fired
//several times if animating 2 or more attributes.
)
Properties have to be numeric, and can accept the following WellKnown words: 'show', 'hide', 'toggle', which min, max, or flip the values (generally bools).
Properties can be made relative if += or -= is prepended to the number.
Example:
$('#clickme').click(function() {
$('#book').animate( {
opacity: 0.25,
left: '+=50',
height: 'toggle'
}
,5000
,function() {/*Animation complete.*/});
});
The basic first steps are:
//fadeIn/fadeOut
$('div').hover(
function () { $(this).fadeIn(); },
function () { $(this).fadeTo(1000,0.50(); }
);
//Hiding:
$('div').mouseleave(function () { $(this).hide('slow'); });
//Fading opacity over time:
$('div').mouseleave(function () { $(this).fadeTo(1000,0.50); });
Some more fun with slideDown and slideUp (like an accordion):
$('div').mouseleave(function () { $(this).slideUp(1000); });
Animating Attribute Values
function makeTall() {$(this).animate("height":75,200);}
function makeShort() { $(this).animate("height":50,200);}
Animation Examples
Animating Panels
CHaining effects: http://www.elated.com/articles/super-easy-animated-effects-with-jquery/
function makeTall(){ $(this).animate("height":75,200);}
function makeShort(){ $(this).animate("height":50,200);}
Packaged Animations
* Space Savers:
-
- Allows saving space by collapsing divs to 'intro', with 'Next…' shown at bottom.
- Click to expand and see rest of whatever div contains.
-
- Nice way of saving space on page:
-
- Nice…
Resources
- Prepackaged Animations: