css - how to animate back to defaults with jQuery -

i'm using jquery apply element-level inline styles override underlying css class style definitions.

all far, want un-do this, , animate properties defined css rules, removing element's inline style.

an oft offered solution store values replace, later animate those. however assumes default state has not changed. if has?

example:

   <style>        #foo { width: 100px;overflow:hidden; }        @media , (min-width:600px) {            #foo { width: 200px; }        }    </style>    <div id='#foo'>bar</div>     <script>    // @ point use clicks toggle    jquery('#foo').animate({width:0});    // user resizes window, triggering change in (overridden) css style    // ...    // @ later point user clicks toggle again    jquery('#foo').animate( **something remove inline style** );    </script> 

in example, let's user starts small browser window. size of #foo 100px. click toggle , animates down 0. next user resizes window, >600px, activating responsive class styles have #foo @ 200px. how can tell jquery figure out , animate it?

simplified example

<style>     .c { width: 50%; } </style> <div class='c' style='width:10%' >foo</div> 

given above, how use jquery find 50% width defined foo classes, ignoring overridden style attribute?

interesting problem.

there not appear way roll changes applied via jquery. however, might able work around issue applying changes style attribute of element.

$('foo').removeattr('style'); 

see fiddle @ - http://jsfiddle.net/bg2ty/1/.

however, note of-course remove other css defined in style attribute.