Javascript 将内容附加到Div，然后尝试向下滑动

我有一个验证脚本，一旦提交，就会将错误“li”标记附加到表单下方的空div中。它工作得很好，尽管我想在将“li”标记附加到div之后滑下这个div

我使用了jQuery中的.slideDown效果来实现这一点，但它似乎只向下滑动到第一个“li”标记，然后它跳过其余的“li”标记。我不明白为什么，而向下滑动的效果是在div本身而不是“li”标签上

下面是我的工作示例

代码如下：

$("form").on("submit", function(e){
  $("li").remove();

  $("input").each(function(){
    var $this = $(this);

    if($($this).val() === ""){
      var formName      = $($this).attr("name");
      var errorMessage  = $(".errorMessage");
      var li            = $("<li></li>",{
        text: "There was an error with " + formName,
        class: "errorText",
      });

      $($this).addClass("errorInput");
      $(errorMessage).append(li);
      $(errorMessage).slideDown(1500);
      e.preventDefault();
    } if($($this).val() != ""){
      $($this).removeClass("errorInput"); 
    } else{
      return true; 
    }
  }); //Input
}); //Form .submit

$（“表格”）。关于（“提交”，函数（e）{
$（“li”）.remove（）；
$（“输入”）。每个（函数（）{
var$this=$（this）；
如果（$（$this.val（）=“”）{
var formName=$（$this.attr（“name”）；
var errorMessage=$（“.errorMessage”）；
变量li=$（“
”{
文本：“有一个“+formName”错误，
类：“errorText”，
});
$（$this.addClass（“errorInput”）；
$（errorMessage）.append（li）；
$（错误消息）。向下滑动（1500）；
e、 预防默认值（）；
}如果（$（$this.val（）！=“”）{
$（$this.removeClass（“errorInput”）；
}否则{
返回true；
}
})；//输入
}); //提交表格

从each（）函数中删除slidedown并将其放在循环之后，它会被调用两次

---

希望有帮助。

您正在调用

.each（）

中的

.slideDown（）

，因此将为每个输入元素调用一次。但是，我怀疑

.slideDown（）

仅在调用它的元素当前不可见时才进行动画

因此，您可以添加一个

，调用

.slideDown（）

，然后它就会产生动画。添加下一个

，调用

.slideDown（）

，由于它已经可见，所以不会发生任何事情；但是，由于您已将内容添加到容器元素中，因此它的大小会增加（您提到的“跳跃”）

简单地说，这句话：

$(errorMessage).slideDown(1500);

---

在整个调用

.each（）

之后，这不是问题所在，但是您正在jquery中双重包装

$this

变量。谢谢！不知道我为什么这么做，哈哈。当循环第一个

li

时，会显示错误msg

div

，然后在第二次迭代中附加另一个

li

，使用

has_error

变量检查是否需要滑动以避免表单submit.hack.augusto之前出现闪烁，谢谢，这是有意义的！杰克也谢谢你，我想知道发生了什么错误。