4

有没有办法（牢记向前兼容性）强制 jQuery 动画在动画中只使用整数值？

我正在为元素的宽度设置动画。

<div style="width: 25px">...</div>

我在检查器中查看动画时的元素，并且该值通常具有十进制的大量粒度。

<div style="width: 34.24002943013px">...</div>

一旦达到目标，它只会“平静”到整数。

<div style="width: 50px">...</div>

通常我不会为此烦恼，因为它显然是功能性的。

然而，在这个项目中，我必须始终保持像素完美，而且我担心使用分数像素宽度（或任何其他以像素测量的属性）会在浏览器之间呈现不一致。我知道letter-spacing一个。

有没有办法确保 jQuery 即使在动画中间也只使用无小数的值？

编辑：我觉得我应该澄清一下；我不只是使用.animate({width:50}). 我的大多数动画都是 jQuery UI 驱动.hide()的 s 和.show()s，我正在寻找的解决方案显然也应该适用于这些。

4

2 回答 2

5

对我来说，这以正确的方式工作：

$("div").animate({ width: 50}, {
    duration: 1000,
    step: function(now, fx){
        fx.now = parseInt(now);
    }
});​
于 2013-06-08T13:41:25.153 回答
3

像这样的东西？

$("div").animate({ width: 50}, {
  duration: 1000,
  step: function(now, fx){

      var value = parseInt($(this).css("width"));

     $(this).css("width", value);
  }
});​

这样，在动画的每一“帧”中，宽度值都会被解析成一个整数值。

这样动画会变得不那么平滑，因为你正在削减一些值，但如果你的动画足够长，它甚至不会被注意到。

于 2012-08-22T17:54:57.897 回答