'animateToSelector' jQuery plugin

By James Padolsey

Intro
Demo
JavaScript
CSS
Docs

[this page] Last updated 10^th February, 2009.

Intro:

This jQuery plugin will allow you to animate any element to styles specified in your stylesheet. All you have to do is pass a selector and the plugin will look for that selector in your StyleSheet and will then apply it as an animation.

The example below uses the plugin to animate the links to their respective ':hover' states (The demo below won't work too well in IE6; the plugin works fine; it's just the demo):

Demo:

Because the styles are specified in the StyleSheet it will work perfectly without JavaScript too. (obviously, without any animation)

JavaScript:

$('#navigation a').animateToSelector({
    selectors: ['#navigation a:hover'],
    properties: [
        'background-color',
        'padding-left',
        'color'
    ],
    events: ['mouseover', 'mouseout']
});

CSS:

/* Preliminary styles: */

#navigation a {
    color: #FFF;
    background: #0d9cd7;
    padding: 5px 10px;
}


/* Hover styles are taken
   from this ruleset: */
   
#navigation a:hover {
    padding-left: 20px;
    background-color: #bdd70d;
    color: #222;
}

Docs:

The plugin requires at least two settings to operate, the 'properties' array and the 'selectors' array; all other options are optional.

Option: 'selectors':
- Default: [] (empty array)
- Info: Here you specify one or more selectors to be used to gain the styles to animate to. Normally you'll only have one selector (selectors: ['#nav a:hover']) but sometimes you might want to add several, especially if you've got split up CSS rulesets in your StyleSheet. When you specify a selector make sure it exists in your StyleSheet - it has to be EXACTLY THE SAME!
Option: 'properties':
- Default: [] (empty array)
- Info: Here you specify one or more properties to be included in the animation. The plugin will looks for the specified properties under each specified selector (in the 'selectors' array). Make sure you only specify properties which can be animated; all color and size properties can be animated but things like 'float','position','text-decoration' and 'font-family' CANNOT be animated!
Option: 'duration':
- Default: 400 (number)
- Info: Duration of the animation (in milliseconds). The higher the figure the slower the animation.
Option: 'events':
- Default: [] (empty array)
- Info: If you specify no events then the animation will begin straight away. If you want it to occur on an event then specify it in this two part array. The first event will trigger an animation to the styles specified by the selectors/properties - if you add a second event then that will trigger an animation taking the changed styles back to what they were before.

Download

Since it's experimental I haven't yet added it to the jQuery plugin repository - for now, you can download it here: CLICK TO DOWNLOAD (Right-click, Save-as).