超大屏幕动画（）不起作用

Question

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

$('.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');
});

有人知道为什么吗？

Answer 1

From docs: 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 使用了插件）。

因此请尝试包含 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，例如，

$('.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>

Answer 2

我的朋友，根据 jQuery 文档：http://api.jquery.com/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). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

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

告诉我进展如何 ;)

超大屏幕动画（）不起作用

Jumbotron animate() doesnt work

html

css

jquery

jquery-animate

twitter-bootstrap-3