运用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代码
Apr 02 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
原生JS中应该禁止出现的写法
May 05 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python tornado微信开发入门代码
2018/08/24 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
阳光体育活动总结
2014/04/30 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
Redis 常见使用场景
2021/08/30 Redis
vue中 this.$set的使用详解
2021/11/17 Vue.js