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不支持在动画上设置该标志,你基本上是搞砸了.

但是,你现在不应该再使用JS动画,因为CSS转换标准化得很好.

添加以下CSS:

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

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

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

现在它的动画效果很好,并且在传统JS动画上浪费了更少的CPU周期.