內容追加一個DIV，然後嘗試了slideDown

我有一次提交驗證腳本，將追加錯誤「禮」標籤下面的表單的空div。它工作得很好，但我想滑下這個div，一旦「li」標籤被添加到div。內容追加一個DIV，然後嘗試了slideDown

我已經使用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

來源

2013-02-11 jcoder

不是問題，但你雙包裝在jQuery的你'$ this'變量。 – Jack 2013-02-11 14:53:56

謝謝！不知道爲什麼我這樣做，哈哈。通過第一'li'，那麼你追加另一'li'在第二次迭代 – jcoder 2013-02-11 14:56:26

錯誤味精'div'獲得展示表單提交。 – Sharlike 2013-02-11 14:58:14

從各（）函數中取出了slideDown並將其放置在循環之後，將其被調用兩次。

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

希望它能幫助。

來源

2013-02-11 14:57:47

用你的'has_error'變量來檢查它是否需要滑動，以避免一些閃爍之前循環時 – Jack 2013-02-11 14:59:30

hack.augusto，謝謝，這是有道理的！傑克也很感謝你，我想知道什麼是錯誤。 – jcoder 2013-02-11 15:04:09

你調用.slideDown()的.each()裏面，所以它正在爲每個輸入元素調用一次。但是，我懷疑.slideDown()只有在它被調用的元素當前不可見時纔會動畫。

所以，你加一個<li>，叫.slideDown()，而且動畫。您添加下一個<li>，請致電.slideDown()，並且沒有任何反應，因爲它已經可見;但是，由於您已將內容添加到容器元素，因此它的大小會增加（您提到的「跳躍」）。

直接讓這一行：

$(errorMessage).slideDown(1500);

到.each()整個呼叫後。

來源

2013-02-11 15:05:52

安東尼，感謝您的快速響應。這就說得通了！ – jcoder 2013-02-11 15:08:52

內容追加一個DIV，然後嘗試了slideDown

回答

相關問題