在服务器错误上闪烁表单的输入答案

【问题标题】：Blink the inputs of the form on server error在服务器错误上闪烁表单的输入
【发布时间】：2014-01-15 13:57:20
【问题描述】：

我在服务器上发布了一个表单，如果服务器响应任何错误，我希望缓慢地闪烁表单的输入（提交和文本区域）。

我试图做这样的事情：

JS：

 $(':input','#myForm').not(':button, :submit, :reset, :hidden').fadeOut(550, function(){
   $(':input','#myForm').not(':button, :submit, :reset, :hidden').toggleClass("blink-class").fadeIn(550);             
});

CSS：

.blink-class { border: 1px solid #ee1b1b !important; }

但它只是从表单中删除输入而不是闪烁。基本上我只想让输入周围的红色边框闪烁，但以一种很好的方式。

有没有办法做到这一点？

【问题讨论】：

您只想闪烁边框而不隐藏内容？是这个意思吗？
@Split Your Infinity 是的

标签： javascript jquery html css

【解决方案1】：

你需要

$('button').click(function () {
    var $els = $(':input', '#myForm').not(':button, :submit, :reset, :hidden');
    $els.fadeOut(550).promise().done(function () {
        $els.toggleClass("blink-class").fadeIn(550);
    });
})

演示：Fiddle

为什么？ :hidden 选择器将导致您的选择器忽略由fadeOut 设置为none 的元素。此外，fadeOut 处理程序会执行多次（选择器选择的每个输入元素执行一次）

解决方案是将 fadeOut() 的元素缓存起来，然后将 fadeIn() 缓存在 promise().done() 处理程序中 - 这是因为我们需要在所有元素都被缓存时同时显示所有输入元素淡出

【讨论】：

在demo元素中贬低然后出现，是否可以这样做但元素不消失？
我的意思是通过单击按钮，输入应以红色边框闪烁（边框慢慢变为红色，而不是红色慢慢贬低）但在您的示例中，如果您向输入添加值，则输入会贬低你会看得更清楚。我只想闪烁边框而不隐藏内容。
很好，但是如何添加 css 类而不是仅添加 border？
@sreginogemoh 试试jsfiddle.net/arunpjohny/fa3cJ/7 但要让这两个示例正常工作，您需要使用 jQuery UI
使用animate函数时无法添加类？因为它没有动画，所以看起来是有线的。

【解决方案2】：

试试这个：

var t = null;

function blink() {
    var obj = $('input[type="text"]')
    obj.addClass("blink-class");
    t = setTimeout(function () {
        obj.removeClass("blink-class");
        t = setTimeout(function () {
            blink();
        }, 550);
    }, 550);
}

demo

【讨论】：

【解决方案3】：

你可以使用animate函数

$(':input','#myForm').not(':button, :submit, :reset, :hidden').animate({borderColor: "#FF0000"}, 250)
    .animate({borderColor: "#FFFFFF"}, 250)
    .animate({borderColor: "#FF0000"}, 250)
    .animate({borderColor: "#000000"}, 250);

FIDDLE

【讨论】：