'animateToSelector' jQuery plugin

By James Padolsey

  1. Intro
  2. Demo
  3. JavaScript
  4. CSS
  5. Docs
[this page] Last updated 10th February, 2009.


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):


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


$('#navigation a').animateToSelector({
    selectors: ['#navigation a:hover'],
    properties: [
    events: ['mouseover', 'mouseout']


/* 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;


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


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).

Copyright © James Padolsey