title: fade backgrounds move text up
body: <p>I have multiple background images that are behind a block of text each. I would like to fade each background image and have the text move up when one background image fades into another.</p>
  
  <p>For example</p>
  
  <p>BG1 (background image 1) has Tegxt1 on top of it. As BG1 fades into BG2, Text1 moves up and is replaced by Text2.</p>
  
  <p>How can I do this with simple jquery and javascript and CSS?</p>
  
  <p>Here's what I tried</p>
  
  <pre><code>this._currentTimeout = setTimeout(function() {
      this.slides$.eq(newSlideIndex).css('z-index', 3).fadeTo(ANIMATION_FADE_DURATION, 1, function() {
          this.slides$.eq(this.currentSlideIndex).css('z-index', 1).css('opacity', 0);
          this.slides$.eq(newSlideIndex).css('z-index', 2);
          this.currentSlideIndex = newSlideIndex;
  
          this._setTransitionTimerForNewSlide(this._getNextSlideIndex(), 5000);
      }.bind(this));
  }.bind(this), durationUntilTransition);
  </code></pre>