Animations

Animations

Hi,
animations were barely discussed so far. Apart from the question which
other widgets could support animations, the more interesting question
is how to implement them.
To start, I want to show how the accordion allows a user to add custom
animations and use them:
To add a custom animation, you add a function to
$.ui.accordion.animations, and usually use the default animation while
customizing options:
$.ui.accordion.animations.myCustomAnimation = function(options) {
this.slide(options, {
easing: options.down ? "bounceout" : "swing",
duration: options.down ? 1000 : 200
});
};
So customiztions are limited to slides, with different settings for
easing and duration. Anything else doesn't make much sense for an
accordion anyway.
Using that new animation is easy:
$(...).accordion({
animate: "myCustomAnimation"
});
Specifying animate: false disables all animations.
Tabs have the fx-option, eg.
$(...).tabs({
fx: { height: 'toggle', opacity: 'toggle', duration: 200 }
});
Afaik there is now way to abstract and reuse those settings, but its
easy enough to specify inline anyway.
Datepicker also supports animation, via the "showAnim" option.
So, based on that, its propably a good idea to try to make options
consistent in naming and usage. We could start deprecating one or the
other in 1.7 and fully replace it later.
Other components that could be enhanced with animations:
Autocomplete: Slide in/fade in the select list, slide out/fade out
after cancelling/selecting something. Smooth scrolling when using page
up/down, ala Picasa.
Slider: Animate the handle when clicking somewhere on the slider (not
the handle), that is, replacing a jump from origin to click target
with an animation.
Dialog: Animate show/hide
Thats what I found so far. I think consistency should be our top
priority. I prefer the option name "animate", as it matches the
animate-method and works well when disabling (animate: false).
Jörn