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

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（）（clear setinterval）在达到255 RGB时重置颜色。 然后使用.CSS（）更改元素边框的RGB颜色。

这也是一个很酷的插件，具有类似的功能： Highlight Fade ，它为事件创建了高亮的背景色。

常见错误：ReferenceError：未定义rgb

发生这种情况是因为您需要将rgb括在引号中（请记住rgb是有效CSS！无需转换为十六进制）。

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

翻译自: https://www.sitepoint.com/attempt-animating-colour-transitions-jquery/

jquery写过渡