运用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函数
Jul 21 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
用JS实现选项卡
2020/03/23 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
天游软件面试
2013/11/23 面试题
建筑专业自我鉴定
2013/10/22 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
温馨提示标语
2014/06/26 职场文书
行政求职信
2014/07/04 职场文书
外出学习心得体会范文
2016/01/18 职场文书