jquery - 有点 Jquery UI Scale+ CSS 问题

Question

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

现在我测试了当我不在 css 中使用 background-position:center 它不再摇晃但是如果我把它去掉它看起来不再像从图像中心缩小了.我能做些什么来摆脱这个？这是一个例子(用Chrome打开)http://jsfiddle.net/gqLZe/

Answer 1

将动画放慢(持续时间很长)，我可以看到 div 的底部实际上偶尔会向上移动一个像素 - 这就是导致摇晃的原因。在样式检查器中观察它，我可以看到 jQuery 正在将 div 的每个位置属性设置为小数，并且 div 的位置实际上会在每次这些小数之一超过整数时发生变化。由于 top 和 height 不一定同时通过整数，因此您会感到震动。另一方面，left 和 width 似乎总是同时传递一个整数，但我不能确定是否是这种情况。无论如何，我无法分辨出任何水平晃动。

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

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

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

另一种解决方案是提供您希望 div 扩展到的大小的父元素，并在 right 和 bottom 而不是 上设置动画>宽度 和高度。这可以使用 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/

这可能是要走的路，如果你能忍受有一个额外的标记元素。