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

您可以使用CSS transition ：

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

演示小提琴