Question

我试图为div的背景颜色设置动画，但它只是不改变它：

HTML

<div id="list2" onclick="changeCol();">
    color
</div>

CSS

#list2{ width:200px; height:100px; border:1px solid #ccc; background-color:#ccc}

的JQuery / JS

function changeCol(){
    alert('foo'); // testing function called
    $("#list2").animate({
      backgroundColor: "#8bed7e"
    }, 500).animate({
      backgroundColor: "#ccc"
    }, 500);
}

任何想法为什么？ Here's a fiddle

Answer 1

使用CSS3（仅适用于支持CSS3的CSS3，不支持的浏览器会改变颜色但不动画）：

HTML：

<div id="list2">color</div>

的CSS：

#list2{background:red;transition:0.5s ease;-moz-transition:0.5s ease;-webkit-transition:0.5s ease;}
#list2.clicked{background:blue;}

JS：

$(function(){ 
    $('#list2').click(function(){ 
        $(this).toggleClass('clicked') 
    }) 
});

这里的工作示例：http://jsfiddle.net/18v8ofwn/1/

请注意，您可以使用jQuery UI库而不是CSS3（请参阅 mour 答案），而无需对代码进行任何更改（跨浏览器解决方案）。

希望有所帮助。

Answer 2

检查

http://jsfiddle.net/qggyec4t/16/

$(document).ready(function () {

    $("#list2").click(function () {
        alert('hii');
        $("#list2").animate({
            backgroundColor: 'red',
        });
    });
});

Answer 3

您必须在代码中使用jquery-ui.js和jquery-ui.css。它会完美地运作。

更新了JSFiddle

function changeCol(){
    $("#list2").animate({
       backgroundColor: "#8bed7e"
    }, 500).animate({
        backgroundColor: "#ccc"
    }, 500);
}

Answer 4

以下是jquery-color-plugin

中使用Official jQuery documentation尝试执行的操作代码

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

function changeCol() {
  $("#list2").animate({
    backgroundColor: "red"
  }, 500).animate({
    backgroundColor: "green"
  }, 500);
}

#list2 {
  width: 200px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: #ccc;
  text-align: center;
  vertical-align: center;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>
<div id="list2" onclick="changeCol()">
  color
</div>

JS Fiddle Code Snippet Link

Answer 5

之前我遇到过这个问题。 JQuery无法为背景颜色制作动画，你需要一个插件才能做到这一点。

这是一个做到这一点：

http://www.bitstorm.org/jquery/color-animation/

https://github.com/jquery/jquery-color/是另一个

Answer 6

默认情况下，jQuery无法为颜色设置动画。当我必须做这些事情时，我正在使用以下插件：

https://github.com/jquery/jquery-color/

您还可以使用CSS3为背景设置动画，效果非常好（请参阅：Transition of background-color）

Answer 7

你有彩色插件吗？没有它，您无法为背景颜色制作动画。你可以在这里找到一个： https://github.com/jquery/jquery-color

动画元素背景颜色onclick

7 个答案: