Javascript背景颜色闪烁与淡入淡出

Question

我有一个需要持续闪烁背景颜色的div.

我想要它做的就是从透明到红色淡入并循环回来.我已经看到了一些这样做的例子,但它们都影响了整个内容,div而不仅仅是background color.

其他例子有一个闪烁,background但它不是一个平滑的过渡,这是我需要的.

如果可能的话,我宁愿不使用CSS动画.

谢谢你的帮助!

Answer 1

您可以使用rgba颜色将颜色淡化为透明.

例:

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);