fadeOut 验证消息 Jquery答案

【问题标题】：fadeOut Validation messages JqueryfadeOut 验证消息 Jquery
【发布时间】：2012-03-09 00:35:20
【问题描述】：

如何使用 jquery fadeOut 函数淡出Fiddle 处的验证响应消息“此字段为必填项”。我只想让消息弹出（而不是淡入）然后在大约 3 秒内慢慢淡出。

这是控制Validation插件的js：

    $(document).ready(function() {
        $('#commentForm').validate({
            submitHandler: function(form) {
                $.ajax({
                    type: 'POST',
                    url: 'process.php',
                    data: $(this).serialize(),
                    success: function(returnedData) {
                        $('#commentForm').append(returnedData);
                    }
                });         
                return false;
            },
            errorPlacement: function(error, element) {
                  error.insertAfter( element).position({
                      my:'right top',
                      at:'right top',
                      of:element          
                  });
               }        
        }); 
    });

感谢您的意见。

【问题讨论】：

标签： jquery validation plugins response fadeout

【解决方案1】：

如果你想让定时淡出效果多次运行，你需要在错误元素消失后立即移除它：

errorPlacement: function(error, element) {
    error.insertAfter( element).position({
    my:'right top',
        at:'right top',
            of:element          
        });
        // here the magic happens, we remove the element, forcing the errorPlacement callback to be run every time
        error.fadeOut(3000, function() { $(this).remove(); });
    }

【讨论】：

【解决方案2】：

您需要做的就是在errorPlacement() 中的error 参数上调用fadeOut：

           errorPlacement: function(error, element) {
              error.insertAfter( element).position({
                  my:'right top',
                  at:'right top',
                  of:element          
              });
              error.fadeOut(3000);
           }

工作示例：http://jsfiddle.net/kmJ87/4/

【讨论】：

嗨，谢谢@maxedison。你能帮我理解为什么淡出只适用于第一个验证响应吗？第二次触发验证时，消息不会淡出。
淡出工作，但会再次点击提交这些函数被调用。