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

Blink以毫秒的延迟对类名计时3。update-value350

看这里。

于 2013-02-11T19:50:35.200 回答