jquery简单实现表单提交后的需要等待效果

来源：互联网发布：ff14 数据库编辑：程序博客网时间：2024/06/05 09:22

简单来说就是遮罩然后加载个动画，往上有利用js手动更改html值实现缓冲动画的，比较麻烦，感觉性价比不高，毕竟谁也不会没事一直在那加载很多张这种等待动画。

主要也就是利用了position里面的fixed这个属性，设置之后页面内的其他元素均不可点击，保证页面安全

<!DOCTYPE html><html><head>//链接文件就不写了，自己调一下就ok.cover {text-align: center;}//position下面的left和right属性，还有top和bottom,通过这四种维度来控制position属性为fixed的元素的位置，具体效果大家可以实践一下#layout {text-align: center;position:fixed;left: 0;right: 0;display: none;}</style></head><body><div class="cover"><a id="saveBtn" onclick="test()">测试按钮</a></div><div id="layout"><img src="loading.gif" /><p>正在提交，请稍后。。。</p><button id="closeBtn" onclick="testBtn1()">关闭</button></div></body><script type="text/javascript">function test(){

<span style="white-space:pre"></span>//opacity的取值从0~1，默认为1，越小越模糊，专业点叫透明度 $('.cover').css('opacity','0.2'); $('#layout').css('display','block');};

//实际开发中下面的代码可以加入ajax的回调函数中function testBtn1(){$('.cover').css('opacity','');$("#layout").css('display','none');};</script></html>

0 0