为什么jQuery背景动画不起作用？
[英]Why doesn't the jQuery background animation work?
问题描述
I'm a beginner web designer, and though I would try my hand at JavaScript and jQuery. 
我是一名初学者Web设计师，尽管我会尝试使用JavaScript和jQuery。 After looking around W3Schools for a bit, I tried to make a simple jQuery animation, but it doesn't seem to work. 在浏览了一下W3Schools之后，我尝试制作一个简单的jQuery动画，但是它似乎不起作用。
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script>
$(document).ready(function(){
$("#name").blur(funtion(){
if(value==null || value==""){
$("#name").animate({background:#D23E42}, "slow");
}
});
});
</script>
<style type="text/css">
body
{
font-family: Arial;
}
#name
{
background:#6BAA64;
color: #FFFFFF;
border:2px none;
padding:5px;
-webkit-border-radius:8px 8px;
-moz-border-radius:8px 8px;
border-radius:8px 8px;
text-align: center;
}
</style>
</head>
<body style="text-align: center;">
Name:
<br />
<input id="name" type="text" value="Your Name" />
</body>
</html>
I was just trying to setup a simple contact/registration form model, so when the name field was left empty, or wasn't changed, would turn red (on blur). 我只是尝试设置一个简单的联系/注册表单模型，所以当姓名字段为空或未更改时，它将变成红色（模糊）。
5 个解决方案
解决方案1
6 已采纳 2012-04-27 06:35:46
You got many mistakes in that code: 您在该代码中有很多错误：
$("#name").blur(function() {
if (!this.value) {
$(this).css('background-color', '#D23E42');
}
});
Mistakes: 错误：
-
funtion=>functionfuntion=>function -
value=>this.value.value=>this.value。 - The value of an input can never be
null, it can be only an empty string.输入的值永远不能为null，只能是一个空字符串。 -
animate=>css, and the reason is that you can't animate background-color changes without a plugin.animate=>css，原因是没有插件就无法为背景颜色更改设置动画。 - the color needs to be a string
#D23E42=>'#D23E42'颜色必须是字符串#D23E42=>'#D23E42' -
background=>background-color.background=>background-color。 -
$("#name")=>$(this)$("#name")=>$(this)
It might be a good idea to stop learning at w3school as it doesn't seem to pay off... 停止在w3school学习可能是个好主意，因为这似乎没有回报...
解决方案2
2 2012-04-27 06:36:13
Sorry but you can't animate background, unless you use jColor 抱歉，除非您使用jColor ，否则您不能设置背景动画
All animated properties should be animated to a single numeric value, except as noted below;
解决方案3
1 2012-04-27 06:36:34
jQuery.animate无法设置背景颜色，而只能设置width, height, left, top等属性。要设置背景颜色，必须使用https://github.com/jquery/jquery-color这样的插件
解决方案4
1 2012-04-27 06:37:08
You have two mistakes: 您有两个错误：
- The color value is a string, so you need quotes around "#D23E42". 颜色值是一个字符串，因此您需要在“＃D23E42”周围加上引号。 Otherwise you're probably seeing a syntax error. 否则，您可能会看到语法错误。
- JQuery doesn't actually animate colors anyway. 无论如何，JQuery实际上并不为颜色设置动画。 There's a plugin that claims to add this feature though I haven't tried it out: 有一个插件声称可以添加此功能，尽管我还没有尝试过：
http://www.bitstorm.org/jquery/color-animation/ http://www.bitstorm.org/jquery/color-animation/
解决方案5
1 2012-04-27 06:39:58
jsBin demo jsBin演示
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).animate({backgroundColor:'#D23E42'}, 500);
}
});
- In this demo I used the jQuery UI library to achieve the background fade color. 在本演示中，我使用了jQuery UI库来实现背景淡入颜色。
- Use .focusout() 使用.focusout（）
- Use $.trim() to prevent empty spaces being accepted as valid input 使用$ .trim（）防止空白被接受为有效输入
- Always use
===to compare values始终使用===比较值
EDIT Hede is a demo without the UI EDIT Hede是一个没有UI的演示
You surely need to redo the color if the user reenter some text: 如果用户重新输入一些文本，您肯定需要重做颜色：
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).css({background:'#D23E42'});
}else{
$(this).css({background:'#6BAA64'});
}
});
Demo without the UI library 没有UI库的演示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.