-1

ユーザーが入力をクリックしたときにパルスハイライトを表示したい入力フィールドがあります。クラスを追加および削除することでそれができると考えましたが、追加するだけのようです。

CSS

input.update-value {
    -webkit-box-shadow: 0px 1px 5px rgba(12, 141, 45, 0.75);
    -moz-box-shadow:    0px 1px 5px rgba(12, 141, 45, 0.75);
    box-shadow:         0px 1px 5px rgba(12, 141, 45, 0.75);
}

JS

$(function()
    {
       var  testTextBox = $('.edit-device');
       var code =null;
        testTextBox.keypress(function(e)
         {
             code= (e.keyCode ? e.keyCode : e.which);
            if (code == 13) 
            $(".edit-device").blur().addClass('update-value').delay(350);
            $(".edit-device").removeClass('update-value').removeClass();
            $(".edit-device").addClass('update-value').addClass();
            $(".delete-input").hide();
             e.preventDefault();
        });

     });
4

2 に答える 2

3

delay()クラスの追加/削除ではなく、アニメーションでのみ機能します。setTimeout を使用するか、関数を複数回実行する場合は、次のように setInterval を使用する必要があります。

$(function () {
    $('.edit-device').on('keyup', function (e) {
        e.preventDefault();
        var self = this, i=0;
        if (e.which == 13) {
            $(self).blur().addClass('update-value');
        }
        var timer = setInterval(function() {
            $(self).removeClass('update-value');
            setTimeout(function() {
                $(self).addClass('update-value');
            },1000);
            i++;
            if (i>3) clearInterval(timer);
        },2000);
    });
});

フィドル

于 2013-02-11T19:11:15.640 に答える
1

次の jQuery プラグインを使用できます$.fn.blink。

$.fn.blink = function(cls, times, delay) {
    var $self = this.removeClass(cls);
    clearTimeout($.fn.blink.handler);
    !function animate(times) {
        if(times) {
            $self.toggleClass(cls);
            $.fn.blink.handler = setTimeout(function () {
                animate(times - 1);
            }, delay);
        }
    }(times * 2);
    return this;
};

使用法：

$(".edit-device").blink("update-value", 3, 350);

ミリ秒の遅延でクラス名を点滅さ3せます。update-value350

こちらをご覧ください。

于 2013-02-11T19:50:35.200 に答える