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

演示小提琴