更新

Question

我有一个网站一直在使用背景颜色动画一段时间突然他们刚停止工作。我想不出我所做的任何重大改变会导致它。所以我创建了一个文件夹来测试我的jquery.min.js和jquery.ui.js文件。这是代码：

的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/testing.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template 3</title>
</head>
<body>
<?php
    include('parts/welcomeSection.php');
?>
</body>
<script type="text/javascript" src="js/animate.js"></script>
</html>

testing.css

@charset "utf-8";
/* CSS Document */
div#testing{
    width: 100px;
    height: 100px;
    border: 1px solid black;    
}

welcomeSection.php

<div id="testing">

</div>

animate.js

$(document).ready(function(){
    color = 'red';
    window.setInterval(function(){
        if(color == 'red'){
            $('div#testing').animate({'background-color': 'blue'}, 'fast', 'easeOutQuint'); 
            color = 'blue';
        }
        else if(color == 'blue'){
            $('div#testing').animate({'background-color': 'red'}, 'fast', 'easeOutQuint');  
            color = 'red';
        }
        console.log(color);
    }, 5000);
});

需要注意的一点是控制台每次都记录颜色变化。但背景色并没有改变。相反，我一直收到这个错误：

Uncaught TypeError: na.easing[this.easing] is not a function

这不仅适用于背景色，也不适用于边框色动画。此外，它无法识别'easeOutQuint'。所有这些都导致Jquery和Jquery UI之间出现问题。我尝试再次下载Jquery和Jquery UI文件，但这并没有解决问题。

普通的Jquery动画，例如marginLeft动画工作正常。

更新

我发现这只是Chrome的一个问题。在浏览互联网时，我在使用JQuery的网站上遇到了问题。但它们在其他浏览器（如Microsoft Edge）中运行良好。这是我Chrome的问题吗？

Answer 1

将background-color更改为backgroundColor

还要确保 jquery-ui.js 包含 jquery easing s

Answer 2

我弄清楚问题是什么。我的本地Chrome版本似乎做了一些时髦的事情。所以我重新安装了Chrome，代码运行正常。它似乎只适用于Chrome。

Jquery UI似乎没有加载

更新

2 个答案: