动画闪烁不透明度动画的最后一个序列

Question

I have three div elements that I animate from opacity: 0 > opacity: 1 .

I animate the last two elements at the same time and for some reason I experience some weird flickering when the last element hits opacity: 1

http://jsfiddle.net/dmfux4LL/ (notice the "IMAGE 2" text to the outer right)

The flickering has been noted in Firefox + Chrome.

Bonus question : For some reason the "image 2" text doesnt even animate in IE.

What im doing is:

CSS:
#frame1-image1, #frame1-image2, #logo-container {
    opacity: 0;
}
JS:
frame1Image1.delay(300).animate(
    { opacity: 1 },
    {
        duration: defaultDurationTime, 
        easing: 'swing',
        complete: function() { // the callback
            console.log("done");
        }
    });

frame1Image2.delay(400).animate(
    { opacity: 1 },
    {
        duration: defaultDurationTime, 
        easing: 'swing',
        complete: function() { // the callback
            console.log("done");
        }
    });

logoContainer.delay(400).animate(
    { opacity: 1 },
    {
        duration: defaultDurationTime, 
        easing: 'swing',
        complete: function() { // the callback
            console.log("done");
        }
    });