h1 元素的动画背景答案

【问题标题】：Animate background of an h1 elementh1 元素的动画背景
【发布时间】：2020-02-23 03:21:34
【问题描述】：

即使包含 jQueryUI 或尝试更改为简单的颜色（例如 'red'，而不是 linear-gradient()），背景也不会改变。

$('#the-button').click(function() {
  $('#something').animate({
    background: "linear-gradient(to right, blue, white)"
  }, 1000);
});

div {
  background: #000;
  width: 480px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

h1 {
  font-size: 48px;
  font-family: arial;
  background: linear-gradient(to right, red, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <h1 id="something">Something</h1>
</div>
<input type="button" id="the-button" value="Animate">

您可以在https://codepen.io/KaiZoDa128/pen/WNNOYaZ查看完整代码

提前致谢。

【问题讨论】：

jQuery 无法为线性渐变设置动画。
所以我应该尝试编写代码。谢谢

标签： jquery css jquery-ui animation jquery-animate

【解决方案1】：

我相信您不能为渐变设置动画（至少对于 CSS，我想 jquery 也是如此）。对于简单的颜色测试，只是渐变（即图像）“覆盖”了背景颜色，因此如果您的元素具有渐变并且添加了背景颜色，您将看不到它。

但是您可以也许使用 CSS :before 和 :after 伪元素来做到这一点。

【讨论】：