material.opacity doesn't work when change position of geometry and material.opacity together

I have two cube geometry in my scene.One is farther than anther one. when i only change material.opacity of the closer cube it works fine.and can see the farther cube. But when i change material.opacity and position.z of the closer cube together,I can't see the farther cube.

here is my animation code:

function animate() {
    if(window.animationStart) {
        var material = skyBox.material.materials;
        var l = material.length;
        for (var i = 0; i < l; i++) {
            if (material[i].opacity > 0) {
                material[i].opacity -= 0.01;
                material[i].needsUpdate = true;
            }
        }
        skyBox.position.z++;
    }
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

I want to make a animation like 『fade-out』 for the close cube, during the animation I want to see the farther cube behind.

thanks for your help.