Enhancement, allowing animateClass to affect other nodes.

Enhancement, allowing animateClass to affect other nodes.

Right now the animateClass functionality is limited to only animating the node(s) you change the class on.
I'd like the ability to use animateClass/switchClass/etc... in a way that affects other nodes.

For example in the case of putting classes on the body to depict states that parts of the page is in (fairly common practice in flexible apps at times) I'd like to be able to have the change in class affect those other nodes.

For example, pretending that there is a div in the page with an id of #sidebar and you add/remove a sidebar-large class in some js to change between sizes and have this css:
#sidebar { width: 150px; }
body.sidebar-large #sidebar { width: 350px; }

So already when sidebar-large is on the body the sidebar is large, and when it's off it's smaller.
You can toggle the class on the body to switch between the two states, and you can animate the class, but the sidebar will not be animated, it'll just change states when the class is changed. So in essence I'd like the ability to specify an extra argument (ie: a selector that .find would be called on) specifying what nodes should be affected.
Perhaps something like:
$('body').toggleClass("sidebar-large", "#sidebar", "slow");

Which would tell animateClass to toggle the sidebar-large class on body, and in addition tell it to look for a #sidebar node inside of it (class changed can only affect the node and it's children) and animate any changed styles on it as well as the body.

Looking at the current animateClass code it shouldn't be to much of a change to implement. A few extra argument handling chunks to accept a selector on toggleClass/addClass/removeClass/switchClass/... and some minor code inside animateClass to run .find and apply the animate code to multiple nodes instead of just one.


The example I gave was a very simple one for demo purposes. In larger cases this kind of functionality is much more useful.
Myself, I have a app where I have a sidebar, top menu, bar below it showing statuses, and another big bar below it for another part of the ui, and another panel that comes up from the bottom. All around a content area. All of which need tweaks to their position based on what ones are open.
My code to handle them originally was a mess with the manual numbers and wasn't flexible enough. However I can easily express the relations between the sizes and positions of the parts of the ui using css and classes describing states of the ui placed on the body.
So I'd like to be able to write that css, and when I want to change the state of the ui make a switchClass call on the body to switch a state class and give it a selector that would grab the major parts of the UI so that animateClass could animate the change in position.