1

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 の Web サイトがダウンしているため、何が間違っているのかを調べることさえできません。

4

4 に答える 4

2

問題は、キューベースの実行を使用しない 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)

デモ:フィドル

于 2013-10-22T02:56:29.593 に答える
0

私は同じ問題を抱えていて、次のように setInterval と setTimeout を組み合わせて解決しました。

function flicker(htmlElem) {

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

}

非表示のクラスは単純に display:none です。これにより、画像 (htmlElem) が 200 ミリ秒ごとに 3 秒間ちらつきます。

于 2014-03-31T18:08:22.090 に答える
0

トグルクラスを使用できます。

ここに例がありますhttp://jsfiddle.net/LRvVm/4/

技術的には無限再帰であるため、少し調整する必要があります。

var interval = 1000;

flicker();

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

ただし、オン/オフ css を微調整することはできますが、うまく機能するはずです。以下のフィドルのように速度を調整することもできます: http://jsfiddle.net/PTQVt/2/

于 2013-10-22T03:12:47.627 に答える
0

これを達成するために 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++;
    }
}
于 2013-10-22T03:13:18.090 に答える