我有一条加载消息和一条成功消息,我希望在提交表单之前淡入并淡出。我无法让代码正确显示这些消息几秒钟,然后像往常一样使用Ajax提交表单。 我试图像这样连接提交按钮。
jQuery(document).ready(function (e) {
jQuery( "#submitbutton" ).click(function() {
e.preventDefault();
jQuery('#loadingMessage').fadeIn(1000);
jQuery('#loadingMessage').hide().delay(1000);
jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
setTimeout( function () {
jQuery("form[id=postorder]").submit();
}, 4000);
});
});
或者,这只是一个例子,我尝试了一些。
jQuery(document).ready(function (e) {
jQuery("form[id=postorder]").submit({
e.preventDefault();
jQuery('#loadingMessage').fadeIn(1000);
jQuery('#loadingMessage').hide().delay(1000);
jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
setTimeout( function () {
[Submit form here]
}, 4000);
});
});
消息正常。 感谢任何帮助!
答案 0 :(得分:1)
你可以做这样的事情
jQuery(document).ready(function (e) {
jQuery( "#submitbutton" ).click(function() {
jQuery('#loadingMessage').fadeIn(2000, function(){
jQuery('#loadingMessage').hide(2000, function(){
jQuery('#saveMessage').show(2000).fadeOut(2000, function(){
jQuery("form[id=postorder]").submit();
});
});
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="loadingMessage" style="display:none;">Loading Message</p>
<p id="saveMessage" style="display:none;">Save Message</p>
<form id="postorder" action="" method="post">
<input type="button" id="submitbutton" value="submit">
</form>
&#13;
jQuery
为non blocking
,因为它是Javascript
库。
Non blocking
表示不会等到上一行完成它的工作。当前一行代码仍在工作时,它将移动到下一行。
因此,您需要使用callback
函数在这种情况下按顺序执行某些操作。
希望这会有所帮助:)