Changing opacity breaks positioning of image

Question

I'm trying to make a random slideshow of images for a gallery. I have two images on the page – the "front" one and the "back" one, and I have a timer set up to, every few seconds, move the back image to the front and load a new back image. I'm basically doing this by swapping the image objects in the code.

As the back image becomes the front image, I have it fade in gradually from an opacity of 0 to an opacity of 1, while I have the front image do the same in reverse. I implemented this as follows:

var fadeOutCt = 0;
var fadeOutInterval;

// Decrements the opacity of element by amt, until cap
function decrementOpacity( element, amt, cap ) {
    var currentOpacity = Number( window.getComputedStyle( element ).getPropertyValue( "opacity" ) ); 
    currentOpacity = currentOpacity - amt;
    element.setAttribute( "style", "opacity:" + currentOpacity );

    fadeOutCt = fadeOutCt + 1;

    if ( fadeOutCt >= cap ) {
        element.setAttribute( "style", "opacity:0" );
        clearInterval( fadeOutInterval );
    }
}

// Calls decrementOpacity to fill the specified interval.
function fadeOut( element, interval ) {
    var currentOpacity = Number( window.getComputedStyle( element ).getPropertyValue( "opacity" ) ); 
    fadeOutCt = 0;
    if ( currentOpacity > 0 ) {
        cap = interval / 10.0;
        amt = 1.0 / cap;
        fadeOutInterval = setInterval( decrementOpacity, 10, element, amt, cap );
    }
}

Separately, I have another routine that resizes the image I load to conform to the user's screen (it also centers the image). I run this immediately before the fade-in or fade-out operation.

function resizeForSlideshow( imgToResize ) {
    // Get size of usable area for slideshow
    var usableWidth = window.innerWidth;
    var titleTable = document.getElementById( "descTable" );
    var windowHeight = window.innerHeight;
    var tableHeight = titleTable.offsetHeight;
    var usableHeight = windowHeight - tableHeight;

    // Resize containing div
    var slideDiv = document.getElementById( "slideDiv" );
    slideDiv.setAttribute( "style", "height:" + usableHeight + "px" );

    // Get size of native image to be displayed
    var nativeWidth = imgToResize.naturalWidth;
    var nativeHeight = imgToResize.naturalHeight;

    // Determine width-to-height ratios of those two
    var windowRatio = usableWidth / usableHeight;
    var imageRatio = nativeWidth / nativeHeight;

    if ( imageRatio > windowRatio ) {
        // image's width-to-height is greater than window
        // image should be set to 100% width, less height
        imgToResize.width = usableWidth;
        imgToResize.height = usableWidth * ( nativeHeight / nativeWidth );

        // relocate image accordingly
        var newTop = ( usableHeight - imgToResize.height ) / 2;
        imgToResize.style.left = 0;
        imgToResize.style.top = newTop + "px";
    }
    else {
        // image's width-to-height is less than window
        // image should be set to 100% height, less width
        imgToResize.height = usableHeight;
        imgToResize.width = usableHeight * ( nativeWidth / nativeHeight );

        // relocate image accordingly
        var newLeft = ( usableWidth - imgToResize.width ) / 2;
        imgToResize.style.top = 0;
        imgToResize.style.left = newLeft + "px";

    }
}

The problem is, when I fade in or fade out, it breaks the positioning of my images. Instead of being centered, they revert to being on the top left of the page (though their size remains what it should be). I've tried a few things but I'm out of ideas, and I was hoping someone would be able to shed some light on what's going wrong here and how I could fix it.

(If seeing the code in action would help: http://artmonitors.com/slideshow/full-slideshow.html

EDIT: I later figured out the problem. The problem is that using setAttribute to set opacity also removed the positional settings I had given. Manually setting element.style.opacity made things work.

Answer 1

I later figured out the problem. The problem is that using setAttribute to set opacity also removed the positional settings I had given. Manually setting element.style.opacity made things work.

Answer 2

How about centering it with css?

.slide {
  display: block;
  margin: auto;
  position: relative;
}

Answer 3

You should close the style with ;

 element.setAttribute( "style", "opacity:" + currentOpacity +";");