运用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 相关文章推荐
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
javascript基础知识
Jun 07 Javascript
如何提高Dom访问速度
Jan 05 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python字符串处理实现单词反转
2017/06/14 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python 实现UTC时间加减的方法
2018/12/31 Python
pow在python中的含义及用法
2019/07/11 Python
pygame实现打字游戏
2021/02/19 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
师范生自我鉴定范文
2013/10/05 职场文书
个人找工作求职简历的自我评价
2013/10/20 职场文书
行政文员岗位职责
2013/11/08 职场文书
六十大寿答谢词
2014/01/12 职场文书
五四演讲稿范文
2014/09/03 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Python面向对象之成员相关知识总结
2021/06/24 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python