运用JQuery的toggle实现网页加载完成自动弹窗


Posted in Javascript onMarch 18, 2014

toggle()事件 它主要切换元素的可见状态。

1、toggle(switch) ①switch是一个可选值,如果不填则原来元素是显示则将其隐藏,如果是隐藏则显示。

HTML 代码:

<p>Hello</p><p style="display: none">Hello Again</p>

jQuery 代码:
$("p").toggle()

结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>

② switch如果有值则是TRUE或false,如果是TRUE则显示元素,FALSE隐藏元素。
HTML
<p id = "tt">Hello</p> 
<input type="button" value="变换" id="b">

JQuery
var i = 0; 
$("#b").click(function(){ 
$("#tt").toggle(i++%2==0); 
});

2、toggle(speed, [callback]) speed是可选参数它表示元素动画的速度,元素以动画的“滑动”的方式进行显示或隐藏,它的值可以使(slow、 normal 、fast); [callback]为函数可以执行的方法。

HTML代码

<p style="display: none" id = "t">Hello Again</p>

JQuery代码
$("#t").toggle("slow",function(){ 
alert("123456"); 
});

即:当用运用第二种方法时,隐藏speed则可以进行网页加载自动弹屏
Javascript 相关文章推荐
我的Node.js学习之路(一)
Jul 06 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
js身份证判断方法支持15位和18位
Mar 18 #Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 #Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 #Javascript
javascript页面上使用动态时间具体实现
Mar 18 #Javascript
JS调用页面表格导出excel示例代码
Mar 18 #Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 #Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python如何获取文件指定行的内容
2020/05/27 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
火山动力Java笔试题
2014/06/26 面试题
大学生就业推荐信范文
2013/11/29 职场文书
运动会广播稿200米
2014/01/27 职场文书
大二自我鉴定
2014/01/31 职场文书
技校毕业生自荐信
2014/06/03 职场文书
安全负责人任命书
2014/06/06 职场文书
经营理念口号
2014/06/21 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
物业保洁员管理制度
2015/08/05 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python