javascript - CSS "!important"规则禁用 animate()

Question

我正在尝试使用 jquery 的 animate() 函数更改图像元素的高度和宽度。图片的高度和宽度属性后跟 CSS 中的“!important”。

CSS:

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

由于“!important”规则，以下 jquery 代码将无效:

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

有没有一种方法可以使用 jquery 为图像设置动画(如果没有“!important”规则，就会发生这种情况)？谢谢。

Answer 1

由于内联样式不会否决 !important 外部样式，除非 !important 本身也是如此，而且 jQuery 不支持在动画上设置该标志，所以你基本上被搞砸了。

但是，既然 CSS 过渡了，您就不应该再使用 JS 动画了 are standardized just fine .

添加以下 CSS:

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

并使用以下 JS 代替您当前的代码:

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

现在它可以很好地制作动画，并且在遗留 JS 动画上浪费的 CPU 周期要少得多。