Javascript背景颜色随着褪色闪烁 [英] Javascript background color blink with fade

问题描述

我有一个div，需要有一个不断闪烁的背景色。

我希望它做的是从透明淡入到红，然后回到循环中。我见过几个这样做的例子 ，但它们都影响 div 的全部内容，而不仅仅是背景颜色。

其他例子有一个闪烁的背景，但它不是一个平滑的过渡，这正是我所需要的。

如果可能的话，我宁愿不使用CSS 动画。

感谢您的帮助！

解决方案

c $ c> rgba color将颜色淡化为透明。

$ b 示例：

  var ofs = 0; 
 var el = document.getElementById（'imp'）; 
 
 window.setInterval（function（）{
 el.style.background ='rgba（255,0,0，'+ Math.abs（Math.sin（ofs））+' ）'; 
 ofs + = 0.01; 
}，10）; 
  

演示： http://jsfiddle.net/Guffa/BUL2z/

使用jQuery：

  var ofs = 0; 
 
 window.setInterval（function（）{
 $（'＃imp'）.css（'background'，'rgba（255,0,0，'+ Math.abs（Math .sin（ofs））+'）'）; 
 ofs + = 0.01; 
}，10）; 
  

I have a div that needs to have a constant flashing background color.

All I want it to do is fade in from transparent to red and back in a loop. I've seen a few examples that do this, but they all affect the entire contents of the div rather than just the background color.

Other examples have a flashing background but it's not a smooth transition, which is what I need.

I'd rather not use CSS animations if possible.

Thanks for any help!

解决方案

You can use rgba color to fade the color to transparent.

Example:

var ofs = 0;
var el = document.getElementById('imp');

window.setInterval(function(){
  el.style.background = 'rgba(255,0,0,'+Math.abs(Math.sin(ofs))+')';
  ofs += 0.01;
}, 10);

Demo: http://jsfiddle.net/Guffa/BUL2z/

Using jQuery:

var ofs = 0;

window.setInterval(function(){
  $('#imp').css('background', 'rgba(255,0,0,'+Math.abs(Math.sin(ofs))+')');
  ofs += 0.01;
}, 10);

这篇关于Javascript背景颜色随着褪色闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！