尝试使用jQuery对颜色过渡进行动画处理

我刚才提到的.setInterval（）函数之前。 同时创建一个脚本这将（理论上）使用jQuery的动画色彩过渡我用这个功能。 例如，从白色到浅红，红，深红如将一个不透明的过渡。

在动画效果颜色转变初步尝试

这里是我的尝试。 请注意，最初的结果不是很好，所以我也没再浪费时间编码，但这里主要发布供我参考。

 $('#input-page-url').css('border-color','rgb(255, 255, 255)');

var r = 0, g = 0, b = 0;
var interval = 25;
var borderWidth = 0;

var animateLoop  = setInterval(function() {

/* exit loop if out of colour range */
if ((r+interval) > 255) { r = 255; clearInterval(animateLoop); }
else { i++; r += interval; borderWidth += 0.2; }

$('#input-page-url').css(
      { 
         'border-color': 'rgb('+r+','+g+','+b+')',
         'border-width': borderWidth
      });


console.log('rgb('+r+','+g+','+b+')');

}, 100); 

这是一种.setinterval（）循环例如使用jQuery的功能.clearInterval（）（明确的setInterval）重置的颜色，当它达到255 RGB。 然后，它使用.CSS（）来改变元素边框的RGB颜色。

这也是一个很酷的插件，它有类似的功能： 选中淡出这创造了事件的一大亮点的背景颜色褪色。

常见错误：的ReferenceError：RGB是没有定义

这是因为你需要封闭RGB引号（记住RGB是有效的CSS！无需转换为十六进制）。

 $('#input-page-url').css('border-color','rgb(redShade, 0, 0)'); 

From: https://www.sitepoint.com//attempt-animating-colour-transitions-jquery/