我有一個帶有靜態內容的垂直選框。我正在嘗試實現下面 JavaScript 注釋中概述的內容 - 根據剛剛進入視圖的圖像淡入新的背景顏色。筆在這里：https : //codepen.io/TraeRegan/pen/mdbKRXY我嘗試了各種各樣的 jQuery 插件，這些插件適用于在某些元素進入視口時用戶滾動觸發的動畫，但是當它們變得可見時，我無法讓它們檢測 CSS 動畫元素。JavaScript$(function() {  var image1_bg_color = '#317a5c';  var image2_bg_color = '#dedede';  var image3_bg_color = '#ff0000';  var image4_bg_color = '#000000';// pseudo-code...// When #image2 becomes visible fade .container bg color from image1_bg_color to image2_bg_color// When #image3 becomes visible fade .container bg color from image2_bg_color to image3_bg_color// When #image4 becomes visible fade .container bg color from image3_bg_color to image4_bg_color// When #image1 re-enters view fade .container bg color from image4_bg_color to image1_bg_color// etc.});HTML<div class="container">  <div class="marquee">    <img src="https://dummyimage.com/320x240/000/fff.gif&text=1" id="image1">    <p>This is some text about image 1.</p>    <img src="https://dummyimage.com/320x240/000/fff.gif&text=2" id="image2">    <p>This is some text about image 2.</p>    <img src="https://dummyimage.com/320x240/000/fff.gif&text=3" id="image3">    <p>This is some text about image 3</p>    <img src="https://dummyimage.com/320x240/000/fff.gif&text=4" id="image4">    <p>This is some text about image 4.</p>  </div></div>CSS.container {    width: 640px;    height: 480px;    margin: 0 auto;    overflow: hidden;    background: white;    position: relative;    box-sizing: border-box;    background-color: #317a5c;}.marquee {    width: 320px;    top: 480px;    position: relative;    box-sizing: border-box;    animation: marquee 30s linear infinite;    margin: 0 auto;    text-align: center;    color: #ffffff;}@keyframes marquee {  from {    transform: translateY(0);  }  to {    transform: translateY(-150%);  }}