Question

是否有办法（保持前向兼容性）强制jQuery动画在动画中仅使用整数值？

我正在设置元素的宽度。

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

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

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

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

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

通常我不会为此烦恼，因为它显然很有用。

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

有没有办法确保即使在动画中间jQuery也只使用无十进制值？

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

Answer 1

对我而言，这是以正确的方式运作的：

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

Answer 2

这样的东西？

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

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

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

这样，在动画的每个“帧”中，宽度值将被解析为整数值。

动画会以这种方式不那么顺畅，因为你正在削减一些值，但如果你的动画足够长，它就不会被注意到。

强制jQuery动画使用整数值

2 个答案: