Animate Hooks

[gnarf]

A quick fiddle to demonstrate: ​http://jsfiddle.net/gnarf/9muvX/

I propose that we should add a pre-filter to the properties animated in .animate() that would allow us to convert

a call like .animate({margin: 40}) into .animate({marginLeft: 40, marginRight: 40, marginBottom: 40, marginTop: 40}) automatically.

[john]

I'm mutating this bug into a new feature request - where we add in a set of hooks for doing animations.

[john]

Nominating ticket for 1.7 discussion.

[Rick Waldron]

+1, In support of, pending #9401

[jaubourg]

-1, sounds reasonable to me... but wouldn't making cssHooks more "open" (that is being able to return the redefinition if needed by a third-party like effects.js) solve the issue? I hate the idea of css related stuff hidden into effects.js.

[gnarf]

well Julian - Yeah, I kinda agree that the animateHooks might not be the best implementation -- likely we could make it like:

$.cssHooks.margin = {
    map: function( value ) {
        return {
            marginLeft: value,
            marginRight: value,
            marginTop: value,
            marginBottom: value
        }; 
    }
};

And then soup up .css and .animate to read from the hooks looking for a "map" when they are doing their property mangling stuff i.e. camelCase.

My reasoning for taking the approach I did is that when you do .css("margin", 10); you could actually skip "mapping" the values, because the browser already does it for you, there isn't a ton of reason to have the "map" unless you are doing a per-property based animation....

Does the other approach get a more favorable vote in your eyes?

[timmywil]

+1, Yes, I think some stuff should be in effects.js

[dmethvin]

-1, I have concerns about size if all these strings are going into the source -- is there some other solution? Maybe a plugin would be best for non-trivial animation enhancements.

[john]

+1, Only if we're talking about adding a map to cssHooks (and not necessarily adding in those properties ourselves).

[addyosmani]

+1

[ajpiano]

+1, I like the idea of just using cssHooks from within .animate

[timmywil]

If we are looking towards supporting animations like margin: 30px 40px, I've worked out a regex for it for fun:

/(-?\d+)(?:px)?(?:\s+(-?\d+)(?:px)?)?(?:\s+(-?\d+)(?:px)?)?(?:\s+(-?\d+)(?:px)?)?/

xoxo

[gnarf]

​http://jqbug.com/p508

[Mike Sherov]

Fix #8498. Add cssHooks[prop].expand for use by animate().

Changeset: 8f5f1b2e6c0f7b8b6d66bfc06c7b169a9443c2b8