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转换are standardized just fine，你不应再使用JS动画了。

添加以下CSS：

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

使用以下JS而不是您当前的代码：

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

现在它的动画效果很好，并且在旧版JS动画上浪费了更少的CPU周期。