jQuery - 在 CSS 背景颜色切换上放置 1 秒过渡

Question

我的代码按预期工作，除了我无法在 CSS 颜色更改上设置 1 秒过渡。

背景改变颜色。只是没有过渡。我一直盯着这个并尝试微妙的改变，但我似乎无法让它发挥作用。任何帮助将不胜感激。

Javascript：

$(window).load(function(){

var navPos = 1,
init = true;

$(window).scroll(function () {
    var fixIT = $(this).scrollTop() >= navPos;
    var setPos = fixIT ? 'fixed' : 'relative';
    var setBG = fixIT ? '#000' : '#1db8af';
    $('#navigation').css({  position: setPos });
    $('#navigation').css({  background: setBG}, {transition : 'opacity 1s ease-in-out'});
});
});

Answer 1

我想这里的核心问题是您的代码段中的过渡属性是“不透明度”。您需要将其更改为“背景颜色”（或“背景”或“全部”）。

此外，为了过渡到工作，它必须在属性值更改之前设置。因此，您可以将“transition”属性声明移动到单独的 CSS 规则中。

$(() => $('#navigation').css({
  background: "red"
}));

#navigation {
  background-color: yellow;
  transition: background-color 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navigation">
  Test
</div>