JS

Question

请参阅下面的jQuery：

我真的想知道如何在此代码中为!important使用CSS 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转换来使它工作，因为即使style（$ elem）改变了样式属性，也可以使用css转换.attr（'style'，'...'）;

你使用：

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 ，因此优先级更高。

Answer 5

另一种方法是将您想要设置动画的选择器 wrap 设置为 div，然后为该 div 设置动画。
它将不再受那些 !important 规则的约束。

之前：

<div id="lveis-wrapper_3">
  <!-- content -->
</div>

之后：

$j('#lveis-wrapper_3').wrap('<div class="lveis-outer-wrapper_3" />');
$j('#lveis-outer-wrapper_3').animate({
  opacity: 0.0,
  height : 200
}, 1200);

输出：

<div id="lveis-outer-wrapper_3">
  <div id="lveis-wrapper_3">
    <!-- content -->
  </div>
</div>

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

5 个答案:

JS

的CSS