jQuery change multiple CSS then change back
<p>What is the preferred way to switch several css properties using jQuery and then switch them all back.</p>

<p>For example, if I set:</p>

<pre><code>$element.css({ "background" : "white", "height": "50px", "width" : "30px" });
$anotherElement.css({ "overflow" : "hidden", "font-size": "12px", "padding" : "5px" });
$yetAnotherElement.css({ "top" : "10px", "font-weight": "bold" });
</code></pre>

<p>I used this specific count of elements with 2-3 different selectors for each to illustrate that it's not convenient to save each one by one and it's also not convenient to create "temporary classes" for each one especially if I had <code>yetAnotherAnotherElement</code> and so on... And let's also say they're in different containers.</p>

<p>It would be nice to be able to get the css "object":</p>

<pre><code>var oldCSS= $element.css(); 
$element.css({ ...change css... });

//Change back
$element.css(oldCSS); 
</code></pre>

<p>Should also work nicely with arrays:</p>

<pre><code>//Set
elements.each(function (index, element) { 
     array[index] = $(element).css();
});

//Restore
elements.each(function (index, element) { 
     $(element).css(array[index]);
});
</code></pre>

<p>Is there something like this?</p>

<p>UPDATE: turns out I can set $element.css(cssObject) already by default its just a matter of overriding a blank css() to return an object or string based on a flag. For example:</p>

<p><code>element.css("overflow", true)</code> would return <code>{ "overflow" : "hidden" }</code> 
<code>element.css("position", "overflow", true)</code> would return <code>{ "position" : "absolute", "overflow":"hidden" }</code></p>

<p>Then it can be easily restored like I want: <code>element.css(cssObject)</code></p>
