jQueryUI animate(color) 不起作用

Question

我想对输入元素的背景颜色进行动画处理，但它不起作用:(

JavaScript（提交时）：

function sendImage() {
    formularz = $('form#sendImage');
    autor = formularz.children('input[name=autor]');
    if (autor.val().length < 1 || autor.val().length > 20) {
        console.log('start');
        autor.animate({
            backgroundColor: 'red',
            width: '100px',
        }, 3000, function() {
            console.log('end');
        });
    }
}

jQuery liblaries：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<!-- I tried also this -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

在JS函数中运行良好 - 显示控制台中的日志，元素的宽度也在变化，但背景颜色没有，并且在控制台中没有显示任何错误。

有什么建议吗？

Answer 1

默认情况下，jQuery 无法对背景颜色进行动画处理。您有两种选择，首先您可以使用第三方插件。其次，你可以使用CSS。后者更可取。下面介绍如何通过在元素上设置transition CSS规则，然后在jQuery代码中添加类来实现。

input {
    transition: all 3s;
}
input.error {
    background-color: red;
}

function sendImage() {
    var $formularz = $('form#sendImage');
    var $autor = $formularz.children('input[name=autor]');
    if ($autor.val().length < 1 || $autor.val().length > 20) {
        $autor.addClass('error');
    }
}

工作示例

Answer 2

我很确定在Javascript中，您需要通过其ID指示您正在为元素添加样式。因此，如果您将元素的 Id 设置为 autor，它将在 if 语句中使用以下方法工作：

document.getElementById('autor').style.background-color="red";

Answer 3

Rory McCrossan，我测试了您的建议，'backgroundColor'效果很好，但后来我想再次检查backgoundColor，它也有效......

所以我不知道出了什么问题。可能有一些错别字，或者我忘记了一些想法。很抱歉造成混乱。