jquery的动画背景代码不工作！ [英] Jquery animate background code not working!
问题描述
请参阅我有一个jQuery代码，我认为它应该可以工作，但它仍然不起作用！所以请帮助我。 Th输入有原始背景色 #fff ，我希望在输入时将背景色改为＃789 具有褪色效果。这是我所做的代码。
$（'input.login_reg_input'）。focus（function（）{
$（this）.animate（{
backgroundColor：fadeColor
}，250，'linear'，function（）{}）;
}）;
我已经通过stackoverflow进行搜索，但没有找到一个好的解决方案。所以请帮助我解决这个问题。
在此先感谢！
<只用jQuery库，你不能为背景颜色设置动画。但您可以使用jQuery UI进行动画制作。
所以这工作正常
<！DOCTYPE html>
< html>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js>< / script>
< script>
$（document）.ready（function（）{
$（'input.login_reg_input'）。focus（function（）{
$（this）.animate（{
'backgroundColor'：'＃768'
}，250，'linear'，function（）{}）;
}）;
}）;
< / script>
< / head>
< body>
< input class =login_reg_input>点击我< /输入>
< / body>
< / html>
几年后，这里有更好的选择：
使用CSS3
input.login_reg_input {
-ms-transition：background-color 1s;
-o-transition：background-color 1s;
-moz-transition：background-color 1s;
-webkit-transition：background-color 1s;
转换：背景色1s;
}
input.login_reg_input：focus {
background-color：＃789;
$ h
$ b $ h $只使用jQuery jQuery UI）
$（'input.login_reg_input'）。focus（function（）{
var $ elem = $（this），
cnt = 0，
from = {//白色（reg，绿色，蓝色）的动画255
r：255，
g：255，
b：255
$ = $ {$＃b78：
}; $ b $ = $ {$
$ b //从颜色插入颜色到颜色
$（from）.animate（to，{
duration：1000，
step：function（now ）{
//为每个r，g和b调用步骤
if（++ cnt％3 === 0）{//我只想在整个三元组插入时进行处理
$ elem.css（'background-color'，
'rgb（'
+ Math.round（this.r）+'，'
+ Math.round（this.g）+'，'
+ Math.round（this.b ）+'）'）;
}
//困惑？只需取消下面的注释行，你就会得到它的
// console.log（now，this）;
}
}）;
}）;
See I have a jquery code which I thought that it should work but still it's not working! So please can help me out. Th input have original background color #fff and I want that on focusing that input the background color should change into #789 with a fade effect. Here is the code that I have made.
$('input.login_reg_input').focus(function () {
$(this).animate({
backgroundColor:fadeColor
}, 250, 'linear', function() { });
});
I have search through the stackoverflow and had not found a good solution. So please help me out with this.
Thanks in advance!
解决方案 With just the jQuery lib you cannot animate the background color. But you can animate it with the jQuery UI on top of it.
So this works fine
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('input.login_reg_input').focus(function () {
$(this).animate({
'backgroundColor': '#768'
}, 250, 'linear', function() { });
});
});
</script>
</head>
<body>
<input class="login_reg_input">click me</input>
</body>
</html>
Some years later, here are better alternatives:
Using CSS3
input.login_reg_input {
-ms-transition: background-color 1s;
-o-transition: background-color 1s;
-moz-transition: background-color 1s;
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
input.login_reg_input:focus {
background-color: #789;
}
Using only jQuery (without jQuery UI)
$('input.login_reg_input').focus(function () {
var $elem = $(this),
cnt = 0,
from = { // animate from white (reg, green, blue) 255
r: 255,
g: 255,
b: 255
},
to = { // to #778899 (119, 102, 136)
r: 119,
g: 102,
b: 136
};
// interpolate "from" color to the "to" color
$(from).animate(to, {
duration: 1000,
step: function(now) {
// step is invoked for each r, g and b.
if (++cnt % 3 === 0) { // I want to process only when the whole triple is interpolated
$elem.css('background-color',
'rgb('
+ Math.round(this.r) + ','
+ Math.round(this.g) + ','
+ Math.round(this.b) + ')');
}
// confused? Just uncomment line below and you will get the hang of it
// console.log(now, this);
}
});
});
这篇关于jquery的动画背景代码不工作！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
