jQuery .css - 相对百分比值 (+=/-=)

Question

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

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

这发生在 div 上:

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

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

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value.

已经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 中得到修复。

同时，三个选项:

1. 您可以使用持续时间非常短的animate(这里我正在做一个inline-block，只有 25%，所以我们可以看到结果):<

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

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

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

1. 查看 the commit 并修补您的 jQuery 副本(或仅使用当前正在进行的构建)。

2. 用像素测量元素:

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

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

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