JUquery 不能使用animate

Posted 2020-09-24 钱钱钱啊

我们知道jQuery几乎是我们最常用的javascript库了，不过尽管他自己本身拥有大量的特效，但却仍然缺少一些动画效果。比如说，颜色、背景颜色的变换。

animate一般只支持大小，位置，透明度的变化

今天看到新浪微博在微博发布框无内容时，点击发布按钮，发布框会有背景颜色闪烁，产生警示的效果，友好的用户体验就想模仿一下。 
于是又纠结了一天。。。 

刚开始我用jQuery的fadeIn和fadeOut，很快的就能达到效果。但是我发现，微博那里是逐渐地改变背景颜色实现的，而fadeIn跟fadeOut是通过逐渐改变alpha即透明度实现。所以开始纠结中。。 
然后，写了段代码 

var color = function(){};
color.fadeIn = function(a){
if(a>=255){
$(‘#input‘).css(‘backgroundColor‘, ‘gba(‘+a+‘,‘+a+‘,‘+a+‘)‘);
a++;
setTimeout(color.fadeIn(a), 20);
} else {
setTimeout(color.fadeOut(a), 20);
}
}
color.fadeOut = function(a){
// 此处省略
}

简单说，我是想实现，比如rgb(a, a, a)递增至rgb(255, 255, 255) 再递减至 rgb(a, a, a) 
但是效果差很多，一测试颜色没变化。 
于是，打了一段测试代码 

setTimeout($(‘#input‘).css(‘backgroundColor‘, ‘red‘), 1000);
setTimeout($(‘#input‘).css(‘backgroundColor‘, ‘black‘), 2000);

打开浏览器，直接就是黑色，并没有从红色跳到黑色。 
。。。 
后来 找到jQuery的一个插件叫jquery.color.js里面重写了backgroundColor,color,boderColor等属性颜色的animate效果 
于是问题可以这样解决 ： 
$(‘#input‘).animate({backgroundColor:‘red‘}, 1000); 
这样就可以从原始的背景颜色逐渐变成红色的效果。 
很神奇啊，开始研究jquery.color.js的源代码。 
先附上用jquery.color.js实现的颜色闪烁的警示效果代码 

$(‘.publish a‘).click(function(){
var content = $(‘textarea‘).val();
if(content==""){
$(‘#input‘).stop(false, true).animate({backgroundColor:‘#FF9966‘}, 250)
.animate({backgroundColor:‘#FFF‘}, 200)
.animate({backgroundColor:‘#FF9966‘}, 250)
.animate({backgroundColor:‘#FFF‘}, 200);
} else {
$.post(url, {input:content},function(data){
});
}
});