jQuery - 如何延遲表單提交，直到動畫完成？

我有這個頁面動畫，當用戶離開頁面時，文檔向左滑動。然而，我也有這種形式，用戶填寫然後點擊「下一步」按鈕，我希望提交表單以等待動畫完成（動畫e3ms？）jQuery - 如何延遲表單提交，直到動畫完成？

憑藉我平庸的JavaScript知識（特別是表格和解析）我寫了一個腳本，據我所知應該工作，但事實並非如此。有任何想法嗎？任何幫助將非常感激。

的JavaScript：

function ValidateForm() { 
    var x = document.forms["myForm"]["myInput"].value; 

    if(x == null || x == "") { 
     $(".error-msg").animate({ 
      opacity: "1" 
     }); 

     return false; 
    } else { 
     $("body").animate({ 
      "margin-left": "-200px", 
      opacity: "0" 
     }); 
    } 
}

HTML：

<form name="myForm" action="next.html" onsubmit="return ValidateForm();"> 
    <input type="text" name="myInput" placeholder="Example: [email protected]"> 
    <span class="error-msg">You must fill out required elements!</span> 

    <input type="submit" value="Next"> 
</form>

CSS代碼只是風格形成，並設置.error-MSG與「0」的不透明度。

P.S .:我知道JavaScript表單驗證是危險的，但是一旦我發佈我的網站，我會在我的服務器上使用PHP或ASP驗證以及JavaScript驗證進行備份。

來源

2012-11-26 ModernDesigner

你嘗試動畫完成回調函數？ – Tariqulazam

我可能會將您的ValidateForm回調移動到提交按鈕的onclick上。然後在你的回調中調用e.preventDefault（）來停止從點擊冒泡提交的表單。在此之後，手動提交表單動畫（）

HTML的回調

<form name="myForm" action="next.html"> 
    <input type="text" name="myInput" placeholder="Example: [email protected]"> 
    <span class="error-msg">You must fill out required elements!</span> 

    <input type="submit" value="Next" onclick="ValidateForm();"> 
</form>

的Javascript

function ValidateForm() { 
    // stop the form auto submitting 
    e.preventDefault(); 
    var x = document.forms["myForm"]["myInput"].value; 

    if(x == null || x == "") { 
     $(".error-msg").animate({ 
      opacity: "1" 
     }); 

     return false; 
    } else { 
     $("body").animate({ 
      "margin-left": "-200px", 
      opacity: "0" 
     }, 
     { 
      complete: function() { $("form[name='myForm']").submit(); } 
     }); 
    } 
}

來源

2012-11-26 23:47:44 Owen

您需要在動畫結尾處使用回調函數來提交表單。嘗試以下操作。

function ValidateForm() { 
    var x = document.forms["myForm"]["myInput"].value; 

    if(x == null || x == "") { 
     $(".error-msg").animate({ 
      opacity: "1" 
     }); 
    } else { 
     if ($('form').css('opacity') == 0) { 
      return true; 
     } 

     $("body").animate(
      {margin-left: "-200px",opacity: "0"}, 
      function() { 
       $('form').submit(); 
      } 
     ); 
    } 

    return false; 
}

來源

2012-11-26 23:41:30

+1 [animate]（http://api.jquery.com/animate/）函數的回調。 – Nope

嗯，這似乎只是調用動畫，但不能發佈表單。 :( – ModernDesigner

這必須是因爲'onsubmit =「返回ValidateForm（）;' 您需要將表單的狀態（已驗證或未驗證）存入變量以知道您是否需要播放動畫，或者檢查我應該編輯我的答案因此 –

這是關於JQ動畫文件Here

在.animate參數的最後一個參數是當你的動畫是在其上執行的回調函數，所以你看起來像：

$("body").animate({ 
      "margin-left": "-200px", 
      opacity: "0" 
     }, 200, function() { 
      $('form').submit(); 
     });

PS 200表示完成動畫所需的時間......默認值爲400.

來源

2012-11-26 23:43:35

jQuery - 如何延遲表單提交，直到動畫完成？

回答

相關問題