如何使用！在jQuery animate（）函数中很重要

Question

请参阅下面的jQuery：

我真的很想知道如何在此代码中使用CSS !important for height。

        $j('#lveis-wrapper_3').animate({
            opacity: 0.0,
            height : 200
        }, 1200);

#lveis-wrapper_3的CSS如下：

#lveis-wrapper_3
{
    width: 844px !important;
    height: 936px !important;
    margin: 0pt 0pt 10px !important;
    padding: 0pt !important;
    float: none;
}

由于某些原因，我无法从!important中移除height: 936px ...... 所以我想通过height jQuery函数改变那个animate() - 但是怎么样？

Answer 1

你不能这样做。

根据jQuery documentation ...

“所有动画属性都应该动画为单个数值... ...大多数非数字属性无法使用基本的jQuery功能进行动画处理......”

http://api.jquery.com/animate/

---

我强烈建议您重新检查您对!important的需求。

Answer 2

您可以使用css转换使其工作，因为即使样式属性由$（elem）.attr（'style'，'...'）更改，css转换也会起作用;

你用：

js

// the element you want to animate
$(elem).attr('style', 'your_style_with_important');

css

elem {
    transition: all 0.2 linear;
    -moz-transition: all 0.2 linear;
    -webkit-transition: all 0.2 linear;
}

Answer 3

我用过这样的东西：

const selected = $$(yourSelector);

selected .animate({
    height: height,
    width: width
}, {
    duration: 500,
    easing: 'swing',
    queue: false,
    step: (now, fx) => {
        selected[0].style.setProperty(fx.prop, `${fx.now}${fx.unit}`, 'important');
    },
    complete: () => {
        selected[0].style.setProperty('width', `${width}px`, 'important');
        selected[0].style.setProperty('height', `${height}px`, 'important');
    }
});

Answer 4

你不能这样做，但试试这个！

根据它是否是DIV，IMG，......你将不得不做这样的事情。这个例子是图像的情况：

    $j('img#lveis-wrapper_3').animate({
        opacity: 0.0,
        height : 200
    }, 1200);

优先级在CSS中定义，具有选择器特异性。您对#id的选择器特性是1.0.0，但是现在添加img #id是1.0.1，因此优先级更高。