Question

所以今天我尝试使用jQuery .css()的相对值。

$block.css({'margin-left': '-=100%'});

这发生在div：

<div class="block" style="margin-left: -100px;">

jQuery似乎忽略了百分比:(所以我做了一些研究，jQuery文档说：

从jQuery 1.6开始，.css（）接受类似于.animate（）的相对值。相对值是以+ =或 - =开头的字符串，用于递增或递减当前值。

已经reported as a bug here.我几乎不明白他们说的是什么。我无法弄清楚如何解决它。

任何人都知道如何制作此代码：

$block.css({'margin-left': '-=100%'});

这样做：

<div class="block" style="margin-left: -100%;">

然后：

<div class="block" style="margin-left: -200%;">

依此类推......我现在可以使用.animate()来完成，但我想避免它，我想用css 来实现硬件加速。

Answer 1

他们所说的是它现在无法正常工作。 up to date bug report显示了一个提交，表明它将在即将推出的版本中运行。分配给它的最新里程碑是1.12 / 2.2，因此可能会在v1.12和v2.2中修复。

与此同时，有三个选择：

您可以使用animate，持续时间非常短（此处我执行inline-block只有25％，因此我们可以看到结果）：

＆＃13;

$(".block").animate({'margin-left': '-=25%'}, 10);

＆＃13;

.block {
   border: 1px solid black;
   display: inline-block;
}

＆＃13;

<div class="block">012345678901234567890123456789</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

查看the commit并修补您的jQuery副本（或者只使用当前正在进行的工作版本）。
测量元素并使用像素进行测量：

＆＃13;

(function() {
        var $block = $(".block");
        $block.css('margin-left', -($block.width() * 0.75));
    })();

＆＃13;

.block {
      border: 1px solid black;
      display: inline-block;
    }

＆＃13;

<div class="block">012345678901234567890123456789</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

jQuery .css - 相对百分比值（+ = / - =）

1 个答案: