title: Smooth css change transitions
body: <p>I've setup a jQuery function that changes the body background colour when a certain div comes into view, e.g. the body background colour is black, when <code>#block-three</code> (that contains black text), the body background colour changes to white, and changes back when this goes out of view. This works fine, it's just very sudden though, I'm looking for a much smoother transition between background colours, fading between colours as you scroll (if possible).<br>
  jsFiddle demo: <a href="http://jsfiddle.net/neal_fletcher/TB53d/" rel="nofollow">http://jsfiddle.net/neal_fletcher/TB53d/</a> <br><br>
  HTML: </p>
  
  <pre><code>&lt;div id="block-one" class="block"&gt;
      &lt;div class="inner-block"&gt;Test&lt;/div&gt;
      &lt;div class="inner-block"&gt;&lt;/div&gt;
      &lt;div class="inner-block"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="block-two" class="block"&gt;
      &lt;div class="inner-block"&gt;Test&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="block-three" class="block"&gt;
      &lt;div class="inner-block"&gt;Test&lt;/div&gt;
      &lt;div class="inner-block"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="block-four" class="block"&gt;
      &lt;div class="inner-block"&gt;Test&lt;/div&gt;
      &lt;div class="inner-block"&gt;&lt;/div&gt;
      &lt;div class="inner-block"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="block-five" class="block"&gt;
      &lt;div class="inner-block"&gt;Test&lt;/div&gt;
      &lt;div class="inner-block"&gt;&lt;/div&gt;
      &lt;div class="inner-block"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var blockHeight = [];
  $(".block").each(function () {
      blockHeight.push($(this).height());
  });
  
  function hoverCurrentItem() {
      var sIndex = 0;
      var totalHeight = 0;
      var scrolled = $(window).scrollTop();
      for (var i in blockHeight) {
          totalHeight += blockHeight[i];
          if (totalHeight &gt; scrolled) {
              break;
          } else {
              sIndex++;
          }
      }
  
      var $sItem = $(".block").eq(sIndex);
      if (!$sItem.hasClass("selected")) {
          $(".selected").removeClass("selected");
          $sItem.addClass("selected");
      }
      if ($("#block-three").hasClass("selected")) {
          $("body").css("background-color", "white");
      } else {
          $("body").css("background-color", "black");
      }
  }
  hoverCurrentItem();
  
  $(window).scroll(function (e) {
      hoverCurrentItem()
  });
  </code></pre>
  
  <p>Any suggestions would be greatly appreciated!</p>