是否可以使用jquery為CSS變數設定影片？

我是 Web 開發和 javascript 的新手。目前，我有一個帶有按鈕的頁面，當按下它時，它會更改我的一個 css 變數的值。按下按鈕的結果是頁面的某些部分會立即改變顏色。我想改變這種行為，使顏色的變化是漸進的。但我似乎無法讓它作業。我的代碼如下：

HTML

<div id="background">
  <div id="quote-box">
    <div id="text-wrapper">
      <p id="text" class="cutout-text">I think, therefore I am.</p>
    </div>
    <div id="author-wrapper">
      <p id="author" class="cutout-text">- Rene Descartes</p>
    </div>
    <div id="buttons-wrapper">
      <a href=# id="tweet-quote">
        <div class="icon cutout-bg">
          <i class="fa fa-twitter remains"></i>
        </div>
      </a>
      <div id="buttons-spacer"></div>
      <div id="new-quote" class="button cutout-bg">
        <p class=".remains">New Quote</p>
      </div>
    </d>
  </div>
</div>

SCSS

:root {
  --bg-colour: blue;
  --box-colour: white;
  --box-height: 250px;
  --box-width: 500px;
  --button-height: 3em;
}

@mixin center-content {
  align-items: center;
  display: flex;
  justify-content: center;
}

* {
  margin: 0;
  padding: 0;
}

*:link {
  text-decoration: none;
}

#background {
  @include center-content;
  background-color: var(--bg-colour);
  height: 100vh;
  width: 100vw;
}

#quote-box {
  background-color: var(--box-colour);
  border-radius: 2%;
  height: var(--box-height);
  padding: 50px;
  width: var(--box-width);
}

.cutout-text {
  color: var(--bg-colour);
}

.cutout-bg {
  background-color: var(--bg-colour);
}

.remains {
  color: var(--box-colour);
  font-size: 1.6em;
  padding: 5px;
}

#text-wrapper {
  font-size: 2em;
  margin-bottom: 1em;
  text-align: center;
  width: var(--box-width);
}

#author-wrapper {
  font-size: 1.2em;
  margin-bottom: 3.6em;
  text-align: right;
  width: var(--box-width);
}

#buttons-wrapper {
  display: flex;
  width: var(--box-width)
}

#buttons-spacer {
  flex-grow: 1;
}

.icon {
  @include center-content;
  border-radius: 10%;
  height: var(--button-height);
  width: var(--button-height);
}

.button {
  @include center-content;
  border-radius: 7%;
  color: var(--box-colour);
  height: var(--button-height);
  width: calc(var(--button-height) * 3);
}

.button:hover {
  cursor: pointer;
}

查詢

 const QUOTES = [
    "Veni, vidi, vici",
    "I think, therefore there I am."
  ];
  
 const COLOURS = [
    "orange",
    "blue",
    "red",
    "purple"
  ];

function randomColour() {
  return COLOURS[Math.floor(Math.random() * COLOURS.length)];
}

function randomQuote() {
  return QUOTES[Math.floor(Math.random() * QUOTES.length)];
}

function randomState() {
  var colour = randomColour();
  var quote = randomQuote();
  var author =  "Random Quote Machine";
  return {
    colour: colour, quote: quote, author: author}
}

function initialView() {
  let state = randomState();
  $(":root").css('--bg-colour', state.colour);
  $("#text").text(state.quote);
  $("#author").text(state.author);
}

function nextView() {
  let state = randomState();
  $(":root").animate({'--bg-colour': state.colour}, "slow");
}


function respondToButton() {
  $(".button").on("click", nextView)
}

$(document).ready(function() {
  initialView();
  respondToButton();
});

jquery 函式initialView()按預期作業，它根據存盤在state. 頁面即時更新。

The alternative function nextView() is the function I'm having trouble with. I expected that when I click on a .button element, the CSS variable --bg-colour would begin animating, which would be portrayed as the background of the page changing colour gradually. In reality, nothing happens when I click the button. However, The function respondToButton() definately works, which can be verified by switching nextView to initialView. Then, when the button is pressed, the background instantly changes colour.

What can I do to fix nextView() so it does what I intended?

uj5u.com熱心網友回復：

我找到了這個

所有影片屬性都應影片為單個數值，除非以下說明；大多數非數字屬性無法使用基本的 jQuery 功能進行影片處理（例如，寬度、高度或左側可以設定影片，但背景顏色不能設定，除非使用 jQuery.Color 插件）

在以下站點上：https : //api.jquery.com/animate/。這似乎是一個 jQuery 問題，因此您可以使用插件，或者使用 css，因為background-colour屬性可以設定影片。只是做類似的事情

/* css */
#background, .cutout-text, .cutout-bg {
  transition: background-color 400ms linear;
}

/* jQuery */

function nextView() {
  let state = randomState();
  $(":root").css('--bg-colour', state.colour);
}

標籤：

上一篇：Javascript幻燈片影像容器

下一篇：如何在純JavaScript中單擊另一個單個元素時將css類切換為同一類的元素？