jQuery を使用して要素レベルのインライン スタイルを適用し、基になる CSS クラス スタイル定義をオーバーライドします。
ここまでは問題ありませんが、これを元に戻し、要素のインライン スタイルを削除して、CSS ルールで定義されるプロパティにアニメーションを戻したいと考えています。
頻繁に 提供される解決策は、置換した値を保存し、後でアニメーション化してそれらに戻すことです。ただし、これはデフォルトの状態が変更されていないことを前提としています。持っている場合はどうなりますか?
例:
<style>
#foo { width: 100px;overflow:hidden; }
@media all and (min-width:600px) {
#foo { width: 200px; }
}
</style>
<div id='#foo'>bar</div>
<script>
// at some point use clicks a toggle
jQuery('#foo').animate({width:0});
// now user resizes window, triggering change in (overridden) CSS style
// ...
// at some later point user clicks toggle again
jQuery('#foo').animate( **something to remove inline style** );
</script>
この例では、ユーザーが小さなブラウザー ウィンドウから開始するとします。のサイズ#foo
は100pxです。トグルをクリックすると、0 までアニメーション化されます。次に、ユーザーはウィンドウのサイズを 600 ピクセル以上に変更し、200 ピクセルのレスポンシブ クラス スタイルをアクティブにします#foo
。jQueryにこれを理解してアニメーション化するように指示するにはどうすればよいですか?
簡単な例
<style>
.c { width: 50%; }
</style>
<div class='c' style='width:10%' >foo</div>
上記の場合、オーバーライドされたスタイル属性を無視して、クラスによって foo に定義された 50% の幅を見つけるために jQuery を使用する方法は?