1

我正在尝试创建一个小滑块，其中 jquery UI Scale 带出图像 Div 并扩展第一个。我的问题是，当它在 Google Chrome 中缩放时，它在缩放过程中会有点晃动。在 IE 或 firefox 中，它就像一个魅力，完全没有振动/晃动！

现在我测试了，当我不在 css 中使用 background-position:center 时，它不再抖动，但是如果我把它拿出来，那么它看起来不再像是从图像的中心缩小了。我能做些什么来摆脱这个？这是一个例子（用 Chrome 打开）http://jsfiddle.net/gqLZe/

4

1 回答 1

1

将动画置于慢动作（非常长的持续时间），我可以看到 div 的底部实际上偶尔会向上移动一个像素 - 这就是导致抖动的原因。在样式检查器中观察它，我可以看到 jQuery 将 div 的每个位置属性设置为小数，并且每次这些小数中的一个通过整数时，div 的位置实际上会发生变化。由于顶部和高度不一定同时通过整数，因此您会感到震惊。另一方面， left 和 width 似乎总是同时传递一个整数，尽管我不能确定是否是这种情况。在任何情况下，我都无法区分任何水平抖动。

显然 Chrome 正在截断位置属性中的任何小数，而其他浏览器正在使用浮点算法在任何舍入或截断之前以绝对坐标计算 div 的边界。我不确定这是否属于错误（必须检查规范），尽管最终可能会得到修复/改进。它可能确实是 jQuery 中的一个错误，因为 jQuery 应该可以解决这些浏览器的特性。

解决这个问题需要提供不同的缩放算法。一种解决方案是在 JavaScript 中计算其他浏览器自动计算的值，并且只向 Chrome 提供整数，如在这个 jsFiddle 中：http: //jsfiddle.net/gqLZe/1/

当包含元素具有非整数顶部或左侧（包括由于边框或边距）时，该方法可能会在其他浏览器中导致类似的问题，但只要您坚持整数，它应该可以正常工作。

另一种解决方案是提供您希望 div 扩展到的大小的父元素，并在rightandbottom而不是 on widthand上进行动画处理height。这可以使用 jQuery 非常简单地完成animate()：

var width = $(".frame").width();
var height = $(".frame").height();
$(".frame").css({
    top: height / 2 + "px",
    bottom: height / 2 + "px",
    left: width / 2 + "px",
    right: width / 2 + "px"
}).show().animate({
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
}, 3000, 'linear');

jsFiddle：http: //jsfiddle.net/gqLZe/3/

如果您可以忍受额外的标记元素，那可能就是要走的路。

于 2012-06-18T04:45:03.520 回答