Question

我正在尝试使用jQuery创建一个“恐怖”风格的闪烁效果。页面上的一个方框加载，似乎正常（即几秒钟内没有做任何事情），恐怖屋里的恐怖灯闪烁，然后换成新的盒子。

$("#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 website目前正在下降，所以我甚至无法研究我做错了什么。

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)

演示：Fiddle

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

}

隐藏的类只是display：none 这将显示图像（htmlElem）每隔200毫秒闪烁三秒

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

4 个答案: