JQuery循环闪烁图像

JQuery blinking image in cycle

本文关键字：图像 闪烁 循环 JQuery      更新时间：2023-09-26

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

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

我想做延迟效果(10秒的闪烁，然后停止一段时间，然后再次闪烁，再次停止…)，但我找不到怎么做的方法

我听说你喜欢间隔，所以让我们设置一个间隔来控制你的间隔，这样你就可以在运行间隔时运行间隔。

下面的实时演示有一个运行在500ms的"闪烁间隔"和一个控制闪烁间隔的"暂停间隔"，运行在2000ms:

function blink() {
    $("#light_3_1").animate({
        "opacity": 0
    }, 400).animate({
        "opacity": 1
    }, 400);
}
var blinkInterval;
var pauseInterval;
var blinking = true;
$(document).ready(function () {
    blinkInterval = setInterval(blink, 500);
    pauseInterval = setInterval(toggleBlink, 2000);
});
function toggleBlink() {
    if (blinking) {
        clearInterval(blinkInterval);
        blinking = false;
    } else {
        blinkInterval = setInterval(blink, 500);
        blinking = true;
    }
}
#light_3_1 {
    width: 150px;
    height: 150px;
    background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="light_3_1"></div>

JSFiddle版本:https://jsfiddle.net/kv18e1sL/1/

因为您想在10segs(10,000 ms)后停止，您只需要增加一个变量来关闭SetInterval。

我给你做了一个样品:http://jsfiddle.net/leojavier/t83tb683/

但是你应该使用CSS animation，这样你的动画不会影响你的javascript线程。 

$(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);
});

这是一个版本的CSS(推荐): http://jsfiddle.net/leojavier/t83tb683/1/

相关文章：