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属性是“ opacity”。 您需要将其更改为“ background-color”（或“ background”或“ all”）。

此外，为了过渡到工作状态，必须在属性值更改之前进行设置。 因此，您可以将“ 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>