title: Changing opacity breaks positioning of image
body: <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>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 &gt;= 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 &gt; 0 ) {
          cap = interval / 10.0;
          amt = 1.0 / cap;
          fadeOutInterval = setInterval( decrementOpacity, 10, element, amt, cap );
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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 &gt; 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";
  
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>(If seeing the code in action would help: <a href="http://artmonitors.com/slideshow/full-slideshow.html" rel="nofollow noreferrer">http://artmonitors.com/slideshow/full-slideshow.html</a></p>
  
  <p>EDIT: I later figured out the problem.
  The problem is that using <code>setAttribute</code> to set opacity also removed the positional settings I had given. Manually setting <code>element.style.opacity</code> made things work.</p>