slidedown - How to stop jQuery animations from overriding inline styles? -

slidedown - How to stop jQuery animations from overriding inline styles? -

my problem little complicated.

i have navigation menu, finish dropdowns rely on slidedown() animation functionality. dropdown has have margin-top due way style it, have set margin-top jquery after window load based on user's font, zoom, etc. settings. this, utilize attr("style","margin-top: -22px !important"). makes dropdown work should. however... when utilize slidedown(), jquery removes !important, crucial animation of dropdown. if don't utilize !important, slidedown() animate both margin-top , height, not good.

my question is: there way stop jquery overriding inline style?

example: http://jsfiddle.net/sy9dc/3/

use css({}) alter css propertie value of element:

$(".navigation-secondary-submenu").css('margin-top'," -10px");

or can utilize :

$(".navigation-secondary-submenu").removeclass('old_class').addclass('new_class')

where new_class have css properties .

.new_class{ ****** margin-top: -10px !important; }

or css property added dynamic:

$(docyment).ready(function(){ $(".navigation-secondary-submenu").attr('style','margin-top:-22px !important'); $("button").click(function() { $(".navigation-secondary-submenu").attr('style','margin-top:-10px !important'); }); });

jquery slidedown inline-styles