直到div動畫完成後延遲html表單提交

Question

我正在使用jquery表單驗證插件來驗證我的表單。我已經設置了所有的規則，消息等。所以在我的html中，我做了一個css樣式的對話框，它僅僅作爲確認消息顯示給用戶。當用戶註冊這個div confirmation時，只需在表單的動作文件被調用。我的問題是，我如何延遲表單提交操作的觸發時間足以讓我的確認淡入淡出。當我嘗試立即開始提交或完全沒有做任何事情。

//validation plugin 
$("#register_form").validate({ 
    errorClass: "invalid", 
    invalidHandler: function (event, validator) { 
     $('html, body').animate({ 
      scrollTop: '0px' 
     }, 300); 
    }, 
    onfocusout: false, 
    onkeyup: false, 
    onclick: false, 
    rules: { 
     firstname: { 
      required: true 
     }, 
     lastname: { 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true 
     } 
    }, 

    messages: { 
     firstname: { 
      required: "Enter your first name" 
     }, 
     lastname: { 
      required: "Enter your last name" 
     }, 
     email: { 
      required: "Enter your email", 
      email: "Enter a valid email" 
     } 

    }, 

    errorContainer: $(".errorCont"), 
    errorLabelContainer: $('.errorCont ul'), 
    wrapper: 'li', 

}); //Etc above all working its the code below 

$("#register_form").submit(function (e) { 
    e.preventDefault(); 
    if ($("#register_form").valid()) { 
     showpopup(); 
     // Show popup and then proceed with submission action ?? 
     // calling submit here just submits straight away without waiting for pop to hide 
    } 

}); 

function showpopup() { 
    $('#dialog').fadeIn("slow"); 
    $("#bodywrap").css({ 
     "opacity": "0.3" 
    }); 
    setTimeout(hidepopup, 3000); 
} 

function hidepopup() { 
    $('#dialog').hide(); 
    $("#bodywrap").css({ 
     "opacity": "1"); 

    } 
} 

Answer 1

而不是使用的setTimeout的使用.fadeOut()功能的完整的處理程序。

$('#dialog').fadeOut("slow", function() { 
    // This function will fire after the animation's ending 
    // Submit the form from here. 
}); 

Answer 2

因爲當驗證通過就可以使用validate對象的submitHandler方法提交表單，也jQuery的動畫方法接受在動畫完成時執行的回調函數。

請注意，默認情況下，jQuery在400毫秒內動畫元素，我已經使用setTimeout方法，以防萬一用戶不得不等待3000毫秒。

$("#register_form").validate({ 
    // ... 
    // this function is executed when validation passes 
    submitHandler: function() { 
     var that = this, 
      $body = $("#bodywrap").css({ 
      "opacity": "0.3" 
      }), 
      $dialog = $('#dialog'); 
     $dialog.fadeIn("slow", function(){ 
      setTimeout(function() { 
      $body.css({"opacity": "1"}); 
      $dialog.fadeOut("slow", function(){ 
       that.submit(); 
      }); 
      }, 2600); 
     }); 

    } 
});