jquery - Delay html form submission until div animation complete -

i'm using jquery form validation plugin validate form. have set rules , messages etc. in html have made css styled dialog displayed user confirmation message.when user registers div confirmation fades in on entire page before form's action file called. question how delay forms submit action triggering long enough confirmation fade in , out. when try either straight away fires submit or doesn't @ all.

//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 first name"         },         lastname: {             required: "enter last name"         },         email: {             required: "enter email",             email: "enter valid email"         }      },      errorcontainer: $(".errorcont"),     errorlabelcontainer: $('.errorcont ul'),     wrapper: 'li',  }); //etc above working code below  $("#register_form").submit(function (e) {     e.preventdefault();     if ($("#register_form").valid()) {         showpopup();         // show popup , proceed submission action ??         // calling submit here submits straight away without waiting pop hide      }  });  function showpopup() {     $('#dialog').fadein("slow");     $("#bodywrap").css({         "opacity": "0.3"     });     settimeout(hidepopup, 3000); }  function hidepopup() {     $('#dialog').hide();     $("#bodywrap").css({         "opacity": "1");      } } 

instead of using settimeout, use complete handler of .fadeout() function.

$('#dialog').fadeout("slow", function() {     // function fire after animation's ending     // submit form here. });