平滑的CSS过渡效果

Question

我设置了一个jQuery函数，当某个div进入视图时会改变body的背景颜色，例如，当#block-three（其中包含黑色文本）出现时，body的背景颜色会变为白色，并在这个div离开视图时恢复原来的颜色。这个功能很好用，但是变化非常突然，我正在寻找一种更平滑的背景颜色过渡方式，即在滚动时进行颜色渐变（如果可能的话）。
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()
});

任何建议将不胜感激！

- user1374796

Answer 1

您可以使用 CSS 的 transition 属性：

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

这个演示 Fiddle

- DaniP

---

更喜欢使用CSS的“transition”，因为它更加高效和友好于CPU。 CSS的“transition”和jQuery的“animate()”之间的区别就像“你是否愿意平滑地改变这个”和“该死，你这个笨蛋，现在就把颜色改变！”...如果你明白我的意思的话。话虽如此，如果您知道要动画化哪些属性，请使用“transition:background-color 1s;”。 - Niet the Dark Absol