為什么jQuery背景動畫不起作用？
[英]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>
我只是嘗試設置一個簡單的聯系/注冊表單模型，所以當姓名字段為空或未更改時，它將變成紅色（模糊）。
5 個解決方案
解決方案1
6 已采納 2012-04-27 06:35:46
您在該代碼中有很多錯誤：
$("#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學習可能是個好主意，因為這似乎沒有回報...
解決方案2
2 2012-04-27 06:36:13
解決方案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
您有兩個錯誤：
- 顏色值是一個字符串，因此您需要在“＃D23E42”周圍加上引號。 否則，您可能會看到語法錯誤。
- 無論如何，JQuery實際上並不為顏色設置動畫。 有一個插件聲稱可以添加此功能，盡管我還沒有嘗試過：
解決方案5
1 2012-04-27 06:39:58
jsBin演示
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).animate({backgroundColor:'#D23E42'}, 500);
}
});
- 在本演示中，我使用了jQuery UI庫來實現背景淡入顏色。
- 使用.focusout（）
- 使用$ .trim（）防止空白被接受為有效輸入
- 始終使用
===比較值
EDIT Hede是一個沒有UI的演示
如果用戶重新輸入一些文本，您肯定需要重做顏色：
$("#name").focusout(function(){
var value = $.trim($(this).val());
if(value === ''){
$(this).css({background:'#D23E42'});
}else{
$(this).css({background:'#6BAA64'});
}
});
沒有UI庫的演示
jQuery - 為什么警報動畫不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.