在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

您可以使用toggleClass。

这是一个示例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);

}

隐藏类只是显示：没有显示图像（htmlElem）每200 ms闪烁三秒钟