I'm a beginner web designer, and though I would try my hand at JavaScript and jQuery. After looking around W3Schools for a bit, I tried to make a simple jQuery animation, but it doesn't seem to work.
<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).
You got many mistakes in that code:
$("#name").blur(function() {
if (!this.value) {
$(this).css('background-color', '#D23E42');
}
});
Mistakes:
funtion
=> function
value
=> this.value
. null
, it can be only an empty string. animate
=> css
, and the reason is that you can't animate background-color changes without a plugin. #D23E42
=> '#D23E42'
background
=> background-color
. $("#name")
=> $(this)
It might be a good idea to stop learning at w3school as it doesn't seem to pay off...
Sorry but you can't animate background, unless you use jColor
From the docs :
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be , unless the jQuery.Color() plugin is used).
jQuery.animate
无法设置背景颜色,而只能设置width, height, left, top
等属性。要设置背景颜色,必须使用https://github.com/jquery/jquery-color这样的插件
You have two mistakes:
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).animate({backgroundColor:'#D23E42'}, 500);
}
});
===
to compare values EDIT Hede is a demo without the 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'});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.