jQuery 插入，然后淡出，然后删除

jQuery Insert, then fade out and then remove

本文关键字：然后 删除 淡出 插入 jQuery      更新时间：2023-09-26

我正在验证表单，如果有问题，我会在输入有问题后立即添加一条消息，然后在一段时间后淡出它。问题是我也想从 DOM 中删除该消息。

我

用谷歌搜索了一下，看起来我必须使用fadeout(function(){})或队列。好吧，在其他情况下这没关系，但是当我插入它并用同一行删除时，它有点棘手。还有其他更简单的"单行"方法吗？

我试图添加另一个（更长的延迟），但这根本不起作用。

$("<div style='color: red'>Maximum length is "+$(this).attr('maxlength')+" characters!</div>").insertAfter($(this)).delay(5000).fadeOut().delay(5010).remove();

我也不能真正使用 ID，因为它可以同时抛出多个 ID，或者用户可以快速修复一个输入并单击提交，它会同时删除旧消息和新消息。

谢谢。

Ps.：我能想到的唯一方法是为每个元素生成随机 ID 并使用该 ID 将其删除，但恕我直言，这太复杂了。

为了澄清：上面的那一行在一个循环中，该循环遍历表单中的每个输入和文本区域，如果仅检查最小长度、最大长度和数字，它们就很简单。这就是为什么我不能在那里放一些静态 ID/Class，它不会真正按照我想要的方式工作（只删除添加的元素，没有其他元素，即使用户再次提交表单时再次添加相同的消息等）。感谢。

我认为每个错误消息都与一个字段相关，因此您可以毫无问题地为每个错误消息分配一个 ID。所以这段代码可能很有用：

  $("<div style='color: red' id="FieldName_error">Maximum length is "+$(this).attr('maxlength')+" characters!</div>").insertAfter($(this));
 //This function executes after 2 seconds.
 setTimeout(function(){
    $("#FieldName_error").fadeOut("slow", function(){
        $(this).remove();
    })
 }, 2000)
相关文章：