better-er $.fn.animate() speeds proposal

better-er $.fn.animate() speeds proposal

animate() speeds such as "slow" and "fast" which translate to durations make no sense for varying computed animation distances. for example, animating "slow" will be lightning fast if you animate to a 2000px window width but will crawl within a 200px window width as demonstrated here:


http://jsfiddle.net/8Wdcg/

the experience changes vastly for fluid containers and window widths since animate durations are fixated rather than the actual speeds (for the sake of setting a single tick timer i assume)

i propose adding a signature to $.animate which takes a plain object instead of a duration argument indicating how many units/sec should be changed for each property. this would require setting independent timers for each of them, (perhaps optimizing and grouping some). so you can do something like

  1. $(".blocky").animate({width: "200", opacity: "0.5"}, {width: "400", opacity: "0.1"});

maybe with a special case like "all" so they dont need to be itemized. this will somewhat complicate synchronization, since every timer may end up with different durations, but for now it doesn't seem too difficult to just keep a single animation-complete callback that fires after last timer expires and in the future maybe provide property-specific completion callbacks?

another issue might be performance, and this should be noted for the additional signature.

the flexibility afforded by this is pretty significant especially for interfaces which adapt for eg. mobile device resolutions, fluid window sizes.

thoughts? comments? thanks!
leon