jQueryUI的动画（颜色）不工作

我想动画输入元素的背景颜色，但它不工作:(jQueryUI的动画（颜色）不工作

的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功能效果很好 - 在控制台日志中显示，元素的宽度也正在发生变化，但背景色没有，它不控制台显示任何错误

。

有什么建议吗？

来源

2016-03-05 Invictus

不是'background-color'而不是'backgroundColor'吗？ – 2016-03-05 19:42:02

@noob如果使用属性名称作为文字，那么你不能包含'-'，因为它是无效的，所以你需要使用一个字符串。 jQuery非常聪明，它可以接受CSS属性或DOM样式属性名称。因此，在这种情况下，以下任何一个将工作：''background-color''，'backgroundColor'，''backgroundColor'' –

@Invictus请注意，您包括jQuery和jQueryUI的多个版本 - 您应该删除其中的一个。 –

默认情况下，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

来源

2016-03-05 19:43:43

我在Javascript很肯定你需要指出你是通过其ID添加风格的元素。所以，如果你设置一个元素的ID是AUTOR它的工作使用您的if语句如下：

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

来源

2016-03-05 19:46:51 Zaataro

但这是没有动画（猜测）。 – Invictus

罗里McCrossan，我测试你的建议和'backgroundColor'效果很好，但后来我想再次检查backgoundColor和它也有效...

所以我不知道什么是错的。梅比有些错字或我忘了一些思考。对不起，我感到困惑。

来源

2016-03-05 20:46:28 Invictus

jQueryUI的动画（颜色）不工作

回答

相关问题