Truely Simultaneous Animation of Multiple Elements Jquery

Question

I'm currently trying to achieve an animation with multiply elements to achieve a focused viewport effect.

The issue I am having is that in browsers such as Safari the bottom element does not seems to be animated correctly and you see a 1px line from time to time. You also see this in from if you keep refreshing the browser.

I assume this is because the animations are not firing all at the same time..

The following is the animation code:

$("#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
});

I have provide a full working fiddle of what I have so far:

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

Any tips would be grateful. Note: The reason i'm doing a 4 div solutions is due to needing to support IE-8 and IE-8 not support transparent borders.

UPDATE:

I've also tried the animation in greensock.js and get the same result with the following code:

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

The extra pixel is probably due to rounding error.

Two options come to mind:

1. Use native CSS animation and hope that browsers handle rounding more gracefully than JS libraries.
2. Make the four edge pieces overlap rather than merely touch, so you can't possibly have a gap. You'd have to stick them in their own container and apply opacity to the shared parent, of course.