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

Working example

Answer 2

我很确定在Javascript中你需要表明你是通过它的id为元素添加样式。因此，如果您将元素的ID设置为autor，则可以在if语句中使用以下内容：

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

Answer 3

Rory McCrossan，我测试了你的推荐，'backgroundColor'运作良好，但后来我想再次查看backgoundColor，它也有效......

所以我不知道出了什么问题。 Mayby有些错字或者我忘记了一些想法。对不起，感到困惑。

jQueryUI animate（颜色）不起作用

3 个答案: