如何在 jQuery animate() 函数中使用 !important

Posted 2023-05-08

【中文标题】如何在 jQuery animate() 函数中使用 !important

【英文标题】：how to use !important in jQuery animate() function

【发布时间】：2012-04-13 10:32:10

【问题描述】：

请看下面的 jQuery：

我真的很想知道如何在这段代码中将 CSS !important 用于 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;

由于某些原因，我无法从 height: 936px 中删除 !important... 所以我想通过animate() jQuery 函数更改height - 但是如何？

【问题讨论】：

呃，那些!important...一定是重组代码的一种方式...

@elclanrs 感谢您的评论 :)

【参考方案1】：

你不能这样做。

根据jQuery documentation...

“所有动画属性都应该被动画成一个单个数值... ...大多数非数字属性不能使用基本动画jQuery 功能..."

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

---

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

【讨论】：

有时!important 很有用。我不拥有 html 代码，也不能请求更改。这意味着我必须替换他们的 CSS 等，这会使代码不必要地更长。

@老金，平心而论，我没有说“从不使用它”或“不要使用它”。我只是说它的“需要”应该“重新审视”。

【参考方案2】：

你可以使用css transition来使其生效，因为即使style属性被$(elem).attr('style', '...');改变了css transition也会生效

你使用：

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;

【参考方案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', `$widthpx`, 'important');
        selected[0].style.setProperty('height', `$heightpx`, 'important');
    
);

【参考方案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，因此优先级更高。

【讨论】：

很确定样式表中的!important 会覆盖它，不是吗？

@PlatinumAzure 正确，刚刚测试过。

【参考方案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>