我目前正在尝试使用多个元素来实现动画以实现聚焦的视口效果。
我遇到的问题是，在 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);