运用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生成GUID的多种算法小结
Aug 18 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 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
简单的cookie计数器实现源码
2013/06/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
使用python实现生成用户信息
2017/03/20 Python
Python中join函数简单代码示例
2018/01/09 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
基于python操作ES实例详解
2019/11/16 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
大学生文员专业个人求职信范文
2014/01/05 职场文书
金融管理应届生求职信
2014/02/20 职场文书
国家助学金感谢信
2015/01/21 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
儿子满月酒致辞
2015/07/29 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书