平滑的CSS更改转换

Question

我已经设置了一个jQuery函数，可以在某个div进入视图时更改主体背景颜色，例如，身体背景颜色为黑色，当#block-three（包含黑色文本）时，身体背景颜色会变为白色，并在视线不正常时变回。这工作正常，但它只是非常突然，我正在寻找背景颜色之间更平滑的过渡，在滚动时颜色之间淡化（如果可能）。
的jsfiddle演示：http://jsfiddle.net/neal_fletcher/TB53d/

HTML：

<div id="block-one" class="block"> 
    <div class="inner-block">Test</div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
</div> 
<div id="block-two" class="block"> 
    <div class="inner-block">Test</div> 
</div> 
<div id="block-three" class="block"> 
    <div class="inner-block">Test</div> 
    <div class="inner-block"></div> 
</div> 
<div id="block-four" class="block"> 
    <div class="inner-block">Test</div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
</div> 
<div id="block-five" class="block"> 
    <div class="inner-block">Test</div> 
    <div class="inner-block"></div> 
    <div class="inner-block"></div> 
</div> 

的jQuery：

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 > 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() 
}); 

任何建议，将不胜感激！

Answer 1

你可以使用transition与CSS：

body { 
    background-color: black; 
    transition:all 1s; 
} 

的Demo Fiddle