平滑的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