运用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 相关文章推荐
jquery获取当前日期的方法
Jan 14 Javascript
JS继承用法实例分析
Feb 05 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
react如何快速设置文件路径别名
Apr 28 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python手写均值滤波
2020/02/19 Python
python读取xml文件方法解析
2020/08/04 Python
Python如何绘制日历图和热力图
2020/08/07 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
学生偷窃检讨书
2014/09/25 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
庆七一主持词
2015/06/29 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL