javascript - jQuery でテキストを赤と黒で点滅させる

Question

ページの情報を一部修正するためにjavascriptを使用しており、情報が変更された場合、変更された情報を数回点滅させたいと考えています。

これを試してみましたが、何らかの理由で機能しません。

$('.item_price').css("color" , "red").delay(500).css("color" , "black").delay(500).css("color" , "red").delay(500).css("color" , "black");

Answer 1

delay()非常に奇妙な関数です。使用しているときに使用すると、キューに追加されたタスクが遅延するだけですfx(どのcss()キューにもキューされません)。

強制的css()にキューに入れるには、関数fxを使用します。queue()

$('.item_price').queue(function (next) {
    $(this).css("color" , "red");
    next();
}).delay(500).queue(function (next) {
    $(this).css("color" , "black");
    next();
}).delay(500).queue(function (next) {
    $(this).css("color" , "red");
    next();
}).delay(500);

...などnext()。キューを続行するには、(コールバックに渡された)関数を必ず呼び出してください。

詳細については、これを正確に説明するブログ投稿を書きました。これは、さらに読むのに役立つ場合があります (および jQuery ドキュメント): http://www.mattlunn.me.uk/blog/2012/06 /jquery-delay-not-working-for-you/

Answer 2

すでに jQuery UI を使用している場合は、これを.animate使用してキューを使用できます (.delay引数として遅延を指定できるため、これは必要ありません)。これには、まばたきするだけでなく、実際に色の変化をアニメーション化できるという利点が追加される可能性があります。

http://jsfiddle.net/2PfL4/

Answer 3

以下のかなり醜いコードがこれを行います。

var item_price = $('.item_price').;

item_price.css("color" , "red");
window.setTimeout(function(){
    item_price.css("color" , "black");
    window.setTimeout(function(){
        item_price.css("color" , "red"
            window.setTimeout(function(){
                item_price.css("color" , "black");
            }, 500););
    }, 500);
}, 500);

Answer 4

構成可能なパラメーターを備えた小さな点滅プラグインを作成しました..

デモ: http://jsfiddle.net/9rU5A/3/

   $.fn.blink = function(o) {
        var cfg = {
            bcount: 1,       /* blink count*/
            color: 'orange', /* blink color*/
            delay: 500       /* blink delay*/
        }
       var lc = {                
            timer: null,     /* internal  */
            tCount: 0,       /* internal  */
            oColor: 'black'  /* internal  */
        };

        $.extend(cfg, o);
        lc.oColor = $(this).css('color');

        var that = this;

        var blinker = function() {
            lc.tCount++;

            if (lc.tCount > (cfg.bcount * 2)) {
                clearInterval(lc.timer);
            }
            $(that).css('color', ((lc.tCount % 2) ? lc.oColor : cfg.color));
        };

        lc.timer = setInterval(blinker, cfg.delay);
    };

発信者

$('button').click(function() {
    $('#test').blink({
        bcount: 2,
        color: 'red',
        delay: 200
    });
});