[英]Why doesn't the jQuery background animation work?
我是一名初学者Web设计师,尽管我会尝试使用JavaScript和jQuery。 在浏览了一下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>
我只是尝试设置一个简单的联系/注册表单模型,所以当姓名字段为空或未更改时,它将变成红色(模糊)。
您在该代码中有很多错误:
$("#name").blur(function() {
if (!this.value) {
$(this).css('background-color', '#D23E42');
}
});
错误:
funtion
=> function
value
=> this.value
。 null
,只能是一个空字符串。 animate
=> css
,原因是没有插件就无法为背景颜色更改设置动画。 #D23E42
=> '#D23E42'
background
=> background-color
。 $("#name")
=> $(this)
停止在w3school学习可能是个好主意,因为这似乎没有回报...
jQuery.animate
无法设置背景颜色,而只能设置width, height, left, top
等属性。要设置背景颜色,必须使用https://github.com/jquery/jquery-color这样的插件
您有两个错误:
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).animate({backgroundColor:'#D23E42'}, 500);
}
});
===
比较值 EDIT Hede是一个没有UI的演示
如果用户重新输入一些文本,您肯定需要重做颜色:
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).css({background:'#D23E42'});
}else{
$(this).css({background:'#6BAA64'});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.