2

I'm trying to change an image element's height and width using jquery's animate() function. The image's height and width attributes are followed by "!important" in the CSS.

CSS:

#my_image {
   height: 50px !important;
   width: 50px !important;
}

The following jquery code will have no effect because of the "!important" rules:

$('#my_image').animate({ height: "100px;", width: "100px"}, 1000 );

Is there a way to animate the image using jquery (as would happen if the "!important" rule were not there)? Thanks.

bjb568
  • 11,089
  • 11
  • 50
  • 71
Spokes
  • 116
  • 1
  • 11
  • Maybe this will help you; http://stackoverflow.com/questions/2655925/how-to-apply-important-using-css – Jean-Paul Dec 25 '14 at 22:51
  • 4
    Why would you need `!important` inside such a highly specific css rule? – Yury Tarabanko Dec 25 '14 at 22:51
  • 1
    @YuryTarabanko the specificity of a rule oft makes it a better candidate for `!important` than the genericity. He could for example need to override rules specified for `#mydiv .mycontainer img`, which are more specific and therefore would need the `!important`. Having said that, using `!important` is usually a design fault, and jQuery `animate` cannot override it. There is no direct answer to this question. – Niels Keurentjes Dec 25 '14 at 22:54
  • 4
    Here's a rule for the future, whenever you need to use `!important` you've failed miserably, and it should be the *absolute last* option to get it working, and it's almost never needed. – adeneo Dec 25 '14 at 23:06
  • Thanks to Niels for the explanation; and to Niels and the others for the warning about !important. Perhaps it would indeed be best to dig into the server side code to obviate the stuff that necessitates !important. Guess I'll go with that route. – Spokes Dec 25 '14 at 23:13

1 Answers1

6

As inline styles do not overrule !important external styles unless also !important themselves, and jQuery does not support setting that flag on animations, you're essentially screwed.

However, you just shouldn't use JS animations anymore now that CSS transitions are standardized just fine.

Add the following CSS:

#my_image {
   transition:width 1s, height 1s;
}
#my_image.expanded {
   height: 100px !important;
   width: 100px !important;
}

And use the following JS instead of your current code:

$('#my_image').addClass('expanded');

Now it will animate just fine, and waste a lot less CPU cycles on legacy JS animations.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • 3
    Please never ever ever ever ever use transition all. – bjb568 Dec 25 '14 at 23:00
  • @bjb568 valid comment, but it served the quick example. I'll fix it up. – Niels Keurentjes Dec 25 '14 at 23:00
  • @bjb568 - what's the problem with 'transition', and what's your preferred alternative? – Spokes Dec 25 '14 at 23:16
  • 4
    @Spokes there is no problem with `transition` - my original answer used `transition:all 1s` as a quick fix, which is considered bad practice because it can cause unintended side effects by animating properties other than `width` and `height`. It is usually best to explicitly define which properties should transition, and I modified that into my answer. – Niels Keurentjes Dec 25 '14 at 23:18
  • @NielsKeurentjes - got it. Thanks for the explanation, and the interesting alternative solution. – Spokes Dec 25 '14 at 23:22