用于通知的动画图标

Question

我想在用户浏览其他浏览器选项卡时通知新收到的消息。

首先，我必须将闪烁的红色机器人设置为图标（这里的问题是 Google Chrome 不支持 GIF 动画作为图标）

$('#favicon').attr('href','_/css/img/favicon.gif');

有没有办法循环播放两个图像，一个红色，一个白色，每个图像 500 毫秒？

setInterval(function() {
    $('#favicon').attr('href','_/css/img/red.png');
}, 500);

如何为两个图标执行 500 毫秒的循环？

Answer 1

使用变量并在每次更改时切换它：

var red=1; 
setInterval(function() {  
    if (red==1) { 
        red=0;
        $('#favicon').attr('href','_/css/img/white.png');
    } else { 
       red=1;
       $('#favicon').attr('href','_/css/img/red.png');
    }
}, 500);