Question

我有一个输入字段，当用户点击进入时，我希望有一个脉冲突出显示。我想我可以通过添加和删除一个类来做到这一点，但它似乎只是添加它。

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

     });

Answer 1

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

FIDDLE

Answer 2

您可以使用以下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-value ，延迟 350 毫秒。< / p>

See it here.

jQuery添加和删除不在系列中工作的类

2 个答案: