jquery - 在 jQuery 中创建“闪烁”样式效果

Question

我正在尝试使用 jQuery 创建一个“恐怖”风格的闪烁效果。页面上的一个盒子加载，看起来很正常（即几秒钟内什么都不做），像恐怖屋里的可怕灯光一样闪烁，然后它被一个新盒子取代。

我试过这个：http: //jsfiddle.net/LRvVm/

$("#box").delay(5000).hide().delay(500).show().delay(500).hide().delay(500).show().delay(500).hide().delay(500).show().delay(500).hide(
function(){
         $("#box2").fadeIn("slow");
         });

但它似乎不起作用，更糟糕的是，jQuery 网站目前已关闭，所以我什至无法研究我做错了什么。

Answer 1

问题是，您使用的 hide() 和 show() 不使用基于队列的执行，因此您的 .delay() 没有任何效果。

使用基于队列（动画）的方法，例如hide('fast')// show('fast')/代替fadeOut('fast')fadeIn('fast')

$("#box").delay(5000).hide('fast').delay(500).show('fast').delay(500).hide('fast').delay(500).show('fast').delay(500).hide('fast').delay(500).show('fast').delay(500).hide(

function () {
    $("#box2").fadeIn("slow");
});

更新：

function flicker(count, callback, current) {
    current = current || 0;

    $("#box")[current % 2 == 0 ? 'hide' : 'show']();

    setTimeout(function(){
        if (count * 2 <= current) {
            callback();
            return;
        }
        flicker(count, callback, current + 1)
    }, 500);
}

setTimeout(function () {
    flicker(3, function () {
        $("#box2").fadeIn("slow");
    })
}, 1000)

演示：小提琴

Answer 2

您可以使用切换类。

这是一个例子http://jsfiddle.net/LRvVm/4/

它需要稍微调整一下，因为它在技术上是无限递归！

var interval = 1000;

flicker();

function flicker()
{
    $("#box").toggleClass('on');
    setTimeout(flicker, interval)
}

但是，您可以调整您的开/关 CSS，它应该可以正常工作。您甚至可以像下面的小提琴一样调整速度：http: //jsfiddle.net/PTQVt/2/

Answer 3

您还可以使用 setInterval 来完成此操作，并避免使用一长串 jQuery 方法。这是一个例子。

var x = 0;


window.onload = function () {
    window.timer = setInterval(flicker, 200);
};

function flicker () {
    if (x % 3 === 0) {
            document.body.style.display = 'block';
            x++;
    } else {
            document.body.style.display = 'none';
            x++;
    }
}

Answer 4

我遇到了同样的问题，并通过 setInterval 和 setTimeout 的组合解决了它，如下所示：

function flicker(htmlElem) {

    var parpadea = setInterval(function(){htmlElem.toggleClass('hidden');}, 200);
    setTimeout(function(){clearInterval(parpadea);}, 3000);

}

隐藏类只是 display:none 这将显示图像（htmlElem）每 200 毫秒闪烁 3 秒