Question

我有一个验证脚本，一旦提交，会将错误“li”标签附加到表单下方的空div。虽然我想在“li”标签附加到div之后滑下这个div，但效果很好。

我已经使用了来自jQuery的.slideDown效果来完成这个，但它似乎只滑到第一个“li”标签，然后它跳过其余的“li”标签。我无法弄清楚为什么，滑动效果是div本身而不是“li”标签。

以下是我CodePen中的一个工作示例。

以下是代码：

$("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

Answer 1

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

http://codepen.io/anon/pen/nxtFi

希望它有所帮助。

Answer 2

您在.slideDown()内调用.each()，因此每个输入元素都会调用一次。但是，我怀疑.slideDown()只有当它被调用的元素当前不可见时才会动画。

因此，您添加一个<li>，调用.slideDown()，然后进行动画制作。您添加下一个<li>，调用.slideDown()，但没有任何反应，因为它已经可见;但是，因为你已经向容器元素添加了内容，所以它的大小会增加（你提到的“跳跃”）。

只需拨打以下电话：

$(errorMessage).slideDown(1500);

完成对.each()的调用后

。

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

2 个答案: