运用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 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
js实现登录时记住密码的方法分析
Apr 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对称加密算法示例
2014/05/07 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python并发编程之线程实例解析
2017/12/27 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Django如何配置mysql数据库
2018/05/04 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
信息系统专业个人求职信范文
2013/12/07 职场文书
工作中个人的自我评价
2013/12/31 职场文书
员工聘用合同范本
2015/09/21 职场文书
领导干部学习心得体会
2016/01/23 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Python中的pprint模块
2021/11/27 Python
windows系统安装配置nginx环境
2022/06/28 Servers