1

I have a validation script that once submitted, will append error "li" tags to an empty div below the form. It works great though I would like to slide down this div once the "li" tags are appended to the div.

I have used the .slideDown effect from jQuery to accomplished this but it seems to only slide down to the first "li" tag, after that it jumps through the rest of the "li" tags. I can't figure out why, and the slide down effect is on the div itself not the "li" tags.

Here is a working example in my CodePen.

Here is the code:

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

2 回答 2

3

从 each() 函数中删除滑动并将其放在循环之后，它被调用了两次。

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

希望能帮助到你。

于 2013-02-11T14:57:47.907 回答
0

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

所以，你添加一个<li>，调用.slideDown()，它就会动画。您添加 next <li>， call .slideDown()，没有任何反应，因为它已经可见；但是，由于您已将内容添加到容器元素，它的大小会增加（您提到的“跳跃”）。

只需调用此行：

$(errorMessage).slideDown(1500);

在整个调用之后.each()。

于 2013-02-11T15:05:52.893 回答