Question

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

我遇到的问题是，在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分区解决方案的原因是需要支持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);

Answer 1

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

有两种选择：

使用原生CSS动画，并希望浏览器比JS库更优雅地处理舍入。
使四个边缘部分重叠而不仅仅是触摸，因此您不可能有间隙。当然，您必须将它们粘贴在自己的容器中并将opacity应用于共享父级。

真正同时动画的多个元素Jquery

1 个答案: