Javascript 平滑css更改转换

我已经设置了一个jQuery函数，当某个div进入视图时，它会更改主体背景颜色，例如主体背景颜色为黑色，当

#block three

（包含黑色文本）时，主体背景颜色会变为白色，当视图消失时，它会变回白色。这很好，只是很突然，我正在寻找背景色之间更平滑的过渡，在滚动时在颜色之间逐渐褪色（如果可能）。
JSFIDLE演示：

HTML:

---

如有任何建议，将不胜感激

您可以将

转换
与CSS结合使用：

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

更喜欢CSS
转换
，因为它效率更高，对CPU更友好。CSS
transition
和jQuery
animate（）
之间的区别就像“请您平稳地更改此项”和“GRAGH you---ING笨蛋立即更改颜色！”之间的区别一样。。。如果你明白我的意思。也就是说，更喜欢
过渡：背景色1s如果您知道要设置动画的属性。
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()
});

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