Question

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

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

我想制作延迟效果（闪烁10秒，然后停止一段时间，然后再次闪烁并再次停止......），但我找不到如何操作的方法。

Answer 1

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

以下现场演示有一个＆＃34;闪烁间隔＆＃34;以500毫秒运行，并且暂停间隔为＆＃34;控制闪烁间隔，以2000ms运行：

＆＃13;

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

＆＃13;

#light_3_1 {
    width: 150px;
    height: 150px;
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="light_3_1"></div>

＆＃13;

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

Answer 2

由于你想在10秒（10,000毫秒）后停止，你只需要增加一个变量来关闭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/

JQuery在循环中闪烁图像

2 个答案: