0

My problem is a little complicated.

I have a navigation menu, complete with dropdowns that rely on the slideDown() animation for functionality. My dropdown has to have a margin-top due to the way that I style it, but I have to set the margin-top with jQuery after window load based on the user's font, zoom, etc. settings. To do this, I use attr("style","margin-top: -22px !important"). This makes my dropdown work exactly as it should. However... when I use slideDown(), jQuery removes my !important, which is crucial to the animation of the dropdown. If I don't use !important, slideDown() will animate both margin-top and height, which does not look good.

My question is: Is there any way to stop jQuery from overriding my inline style?

Example: http://jsfiddle.net/Sy9dC/3/

Lrdwhyt
  • 430
  • 5
  • 22

1 Answers1

0

Use css({}) to change css propertie value of element:

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

or you can use :

$(".navigation-secondary-submenu").removeClass('old_class').addClass('new_class')

where new_class have your css properties .

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

or this css property will be 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');
      });
});
Dumitru Chirutac
  • 617
  • 2
  • 8
  • 28
  • I need `margin-top` to be `!important`, which `$.css()` does not support. Otherwise, `slideDown()` will animate the margin, which is unintended. – Lrdwhyt Feb 08 '13 at 13:36
  • Adding the styles through predefined CSS classes is a possibility. However, it's very inelegant because the calculated margin-top could vary widely from -35 to -5 depending on the user's zoom/font settings. – Lrdwhyt Feb 08 '13 at 13:39