0

我目前正在尝试使用多个元素来实现动画以实现聚焦的视口效果。

我遇到的问题是，在 Safari 等浏览器中，底部元素的动画似乎不正确，并且您不时会看到一条 1px 的线。如果您不断刷新浏览器，您也会看到这一点。

我认为这是因为动画不会同时触发..

以下是动画代码：

$("#top").animate({
height: '150px'
}, {
duration: 2000,
queue: false
});

$("#right").animate({
top: '150px',
left: '200px',
height: '50px'
 }, {
duration: 2000,
queue: false
});

$("#left").animate({
top: '150px',
width: '150px',
height: '50px'
}, {
duration: 2000,
queue: false
});

$("#bottom").animate({
top: '200px'
}, {
duration: 2000,
queue: false
});

我已经提供了迄今为止我所拥有的完整的工作小提琴：

http://jsfiddle.net/cjcartlidge/AKERR/

任何提示将不胜感激。注意：我做 4 div 解决方案的原因是需要支持 IE-8 和 IE-8 不支持透明边框。

更新：

我还尝试了 greensock.js 中的动画，并使用以下代码获得了相同的结果：

var tl = new TimelineLite();
tl.to($('#top'), 1, {height: hotspot.y + 'px'}, 0);
tl.to($('#bottom'), 1, {top: (hotspot.y + hotspot.height) + 'px'}, 0);
tl.to($('#right'), 1, { top: hotspot.y + 'px', left: (hotspot.x + hotspot.width) + 'px', height: hotspot.height + 'px'}, 0);
tl.to($('#left'), 1, { top: hotspot.y + 'px', width: hotspot.x + 'px', height: hotspot.height + 'px', }, 0);
4

1 回答 1

0

额外的像素可能是由于舍入误差。

想到两个选择：

  1. 使用原生 CSS 动画，希望浏览器比 JS 库更优雅地处理舍入。
  2. 让四个边缘部分重叠而不是仅仅接触，所以你不可能有间隙。当然，您必须将它们粘贴在自己的容器中并应用于opacity共享父级。
于 2013-11-04T23:45:01.140 回答