Javascript JQuery循环闪烁图像

我有闪烁的图像。有一个jquery代码：

function blink(){
        $("#light_3_1").animate({"opacity": 0}, 400 ).animate({"opacity": 1}, 400 );
    }   
    $(document).ready(function(){
        setInterval(blink, 500);
    });

---

我想产生延迟效果（10秒闪烁，然后停止一段时间，然后再次闪烁，然后再次停止…），但我找不到方法。我听说你喜欢间隔，所以让我们用间隔来控制你的间隔，这样你可以在运行间隔的同时运行间隔

以下实时演示的“闪烁间隔”为500毫秒，控制闪烁间隔的“暂停间隔”为2000毫秒：

函数闪烁（）{
$（“#light_3_1”）。设置动画({
“不透明度”：0
}制作动画({
“不透明度”：1
}, 400);
}
var间隔；
var pauseInterval；
var闪烁=真；
$（文档）.ready（函数（）{
闪烁间隔=设置间隔（闪烁，500）；
pauseInterval=设置间隔（toggleBlink，2000）；
});
函数toggleBlink（）{
如果（闪烁）{
清除间隔（闪烁间隔）；
闪烁=错误；
}否则{
闪烁间隔=设置间隔（闪烁，500）；
闪烁=真；
}
}

#灯光"3"1{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
}

---

由于您想在10段（10000毫秒）后停止，只需增加一个变量即可关闭设置间隔

这里我为您制作了一个样本：

但是，您应该使用

CSS动画

，这样您的动画就不会影响javascript线程

---

---

这里有一个CSS版本（推荐）：

Hi-Eldar，刚刚发布了一个简单的解决方案来解决您的问题，如果您想尝试CSS动画，请告诉我，我可以为您创建一个示例。。。这比使用javascript制作动画要好得多，因为GPU会处理css动画。非常感谢。你已经解决了我的问题。尊重你的惊人技能：）你好。我有一个新问题：我已经做了图像闪烁缓慢，然后它有暂停，然后它快速闪烁。但它不会重复所有的循环，它会继续快速闪烁并暂停。举个例子，我可以这样做吗？（慢速闪烁-暂停-快速闪烁-暂停………并重复慢速闪烁的所有循环）感谢您的回答。这是一种有趣的方式。有一个版本使用了

CSS动画，而不是
projectman的好看！）
$(document).ready(function(){
     var counter = 0;

    function blink(){
       $("#light_3_1").animate({"opacity": 0}, 400 ).animate({"opacity": 1}, 400 );
        counter++;
        if(counter > 9) {
            clearInterval(interval);
        }
    }   
     var interval = setInterval(blink, 500);
});