javascript - jQuery 动画滚动 backgroundColor 不改变

Question

我的 fiddle :https://jsfiddle.net/jzhang172/owkqmtcc/5/

我想要完成的事情:当我在 div 中的任何地方滚动时，div“内容”的背景颜色将会改变。当滚动条停留在 div 的顶部时，它会恢复到原来的颜色。当我添加高度而不是背景颜色时，它工作正常，但不确定为什么背景颜色不起作用:

$(function(){
var content = $(".content");

$(".box").scroll(function(event){
var positionofscroll = $(".content").scrollTop();

if(positionofscroll == 0){
content.stop().animate({
backgroundColor:"rgba(105, 63, 63, 0.69)"
},500);
}else {
content.stop().animate({
  backgroundColor:"red"
},500);

}
}); //scroll


});

.box{
  width:100%;
  height:500px;
  background:gray;
  overflow:auto;
}

.content{
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  height:1000px;
  background:red;
  font-size:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!--Shadow Box when user scrolls -->

<div class="box">
  <div class="content">
    I'm content
  </div>
  
</div>

Answer 1

尝试包含 jQuery UI ，因为 .animate() 在没有修改或颜色插件的情况下不会为颜色设置动画；见.animate()

Animation Properties and Values

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used).

还将 positionofscroll 处的选择器调整为 $(this).scrollTop()；在 if

处将比较运算符更改为 >

$(function() {
  var content = $(".content");

  $(".box").scroll(function(event) {
    var positionofscroll = $(this).scrollTop();
    console.log(positionofscroll);
    if (positionofscroll > 0) {
      content.stop().animate({
        backgroundColor: "rgba(105, 63, 63, 0.69)"
      }, 500);
    } else {
      content.stop().animate({
        backgroundColor: "red"
      }, 500);

    }
  }); //scroll


});

.box {
  width: 100%;
  height: 500px;
  background: gray;
  overflow: auto;
}
.content {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1000px;
  background: red;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<!--Shadow Box when user scrolls -->

<div class="box">
  <div class="content">
    I'm content
  </div>

</div>