Question

我在标题中包含了jQuery Color Animation库（http://www.bitstorm.org/jquery/color-animation/），同样也尝试了jQuery UI库;无论我做什么，我都无法获得一个backgroundColor动画。包括如下：

SRC = “code.jquery.com/jquery-2.1.4.min.js”
SRC = “// cdn.jsdelivr.net/jquery.color-animation/1/mainfile”

（使用脚本标签，但stackoverflow不允许我在这里发布）。

我的代码：

  $("#section__info__what").hover(function() {
  $(profileWhatPathlines).animate({
    backgroundColor: "#FFBF28"
  }, 1000 );
}

其他动画（如宽度）运行正常，而不是我想要的颜色动画。还尝试了许多其他元素来运行代码，同样的问题。

有人能指出我正确的方向吗？

干杯，

迪安

编辑：“profileWhtPathlines”对应是一个由引用ID的其他几个变量组成的变量。如果我只是输入一个随机id（例如：“＃demo”），那同样的问题。动画运行（如宽度），但不是颜色。所以它找到了需要改变的东西但不想运行颜色部分。

Answer 1

嗯..我已经检查了jQuery animate函数的描述，并且它声明字符串值不能动画（例如＆＃34; background-color：red＆＃34;）。

您可以在此处找到可与animate功能一起使用的所有属性：http://www.w3schools.com/jquery/eff_animate.asp

这是我的解决方案：

HTML：

<a href="#" id="section__info__what">
  <div id="example"></div>
</a>

JS：

$(function() {
    $('#section__info__what').hover(function() {
        $('#example').css({
            'background-color':'#FFBF28',
            'width': '150px'
        });
    }, function() {
        // on mouseout, reset the color
        $('#example').css({
            'background-color':'#000',
            'width': '100px'
        });
    });
});

和CSS：

#example {
  background-color: #000;
  width:100px;
  height:100px;
  -webkit-transition: all 1s ease;
   transition: all 1s ease;
}

我使用了css transition属性来制作动画。

以下是演示：https://jsfiddle.net/8b1d1u0p/1/

Answer 2

你是否包含了jquery.animate-colors.js AFTER jquery.js？

对我来说很好，例如：https://jsfiddle.net/7ggq3dka/

<!--jQuery loaded first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Then color animation plugin -->
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"

Answer 3

修正了它。问题是它在我的HTML中更深层地加载了另一个版本的jQuery。所以实际上它做到了这一点：加载jQuery，加载coloranimationlib，加载jQuery。我删除它/第二次包含动画库后工作正常。感谢您的帮助和您的时间！

jQuery - backgroundColor动画未运行（包括颜色库）

3 个答案: