Jumbotron animate() 不起作用答案

【问题标题】：Jumbotron animate() doesnt workJumbotron animate() 不起作用
【发布时间】：2017-04-28 05:02:15
【问题描述】：

我一直在尝试使用 jquery 的 animate(0 方法更改 jumbotron 的颜色，但由于某种原因它不起作用。

$('.jumbotron').on('click', function() {
    console.log('click');
    $('.jumbotron').animate({
        backgroundColor: "rgb(229, 76, 76)"
    }, 1000);
    $('body').animate({
        backgroundColor: "#ff7373"
    }, 1000);
});

仅当我使用 css 选择器更改颜色时才有效。像这样，

$('#jumbo').on('click', function() {
    $( this ).css('background-color','#e54c4c');
});

有人知道为什么吗？

【问题讨论】：

$('.jumbotron').animate({ background-color: "rgb(229, 76, 76)" }, 1000); $('body').animate({ background-color: "#ff7373" }, 1000); 试试这个
还是不行。 @AlivetoDie

标签： jquery html css twitter-bootstrap-3 jquery-animate

【解决方案1】：

From docs：所有动画属性都应该被动画化为一个单一的数值，除非下面提到；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能进行动画处理，除非使用了 jQuery.Color 插件）。

因此请尝试包含jquery color 以使其正常工作。

$('.jumbotron').on('click', function() {
  console.log('click');
  // use this instead of using .jumbotron again
  $(this).animate({
    backgroundColor: "rgb(229, 76, 76)",
  }, 1000);
  $('body').animate({
    backgroundColor: "#ff7373"
  }, 1000);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

如果你不想使用任何插件，那么你可以使用transition like，

$('.jumbotron').on('click', function() {
  console.log('click');
  // just toggle highlighted classs
  $(this).add('body').toggleClass('highlighted');
});

.jumbotron,body {
  -webkit-transition: background 1s linear;
  -moz-transition: background 1s linear;
  -ms-transition: background 1s linear;
  -o-transition: background 1s linear;
  transition: background 1s linear;
}
body.highlighted{background:#ff7373}
.jumbotron.highlighted{background:rgb(229, 76, 76)}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

【讨论】：

奇怪，我添加了和你在这里做的一样的东西，但它对我不起作用，但对你有用。该死的。
如果可能的话，请告诉我网址，以便我可以帮助您找到您的问题。你在用jQuery颜色插件吗？
从头部移除 Jquery 2.1 并在 bootstrap.js 之后添加 color.js
你干得好（你真的在 17 岁吗）。不管怎样，你应该删除Jquery 2.*，一个网页中最好只包含一个版本的jquery。
哦，我没有注意到我有 2 个库。（已删除）。是的，我今年 17 岁：D

【解决方案2】：

我的朋友，根据 jQuery 文档：http://api.jquery.com/animate/

动画属性和值

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以动画，但背景颜色不能，除非使用 jQuery.Color 插件）。除非另有说明，否则属性值被视为像素数。如果适用，可以指定单位 em 和 %。

您需要在 jQuery 之后（并且在您的脚本之前！）包含 https://github.com/jquery/jquery-color，以便能够为 backgroundColor 属性设置动画。

让我知道进展如何；）

【讨论】：