Question

我有一个我在服务器上发布的表单，如果服务器响应任何错误，我想慢慢地闪烁表单的输入（提交和textareas）。

我试图做那样的事情：

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

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

有没有办法做到这一点？

Answer 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选择器会使您的选择器忽略none显示设置为fadeOut的元素。此外，fadeOut处理程序多次执行（对于选择器选择的每个输入元素，执行一次）

解决方案是将fadeOut()，然后fadeIn()元素缓存到promise()。done()处理程序中 - 这是因为我们需要显示所有输入当所有元素都淡出时，元素会立即出现

Answer 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

Answer 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

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

3 个答案: