运用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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
15分钟上手vue3.0(小结)
May 20 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二维数组的去重问题解析
2011/07/17 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP导入导出Excel代码
2015/07/07 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP7 弃用功能
2021/03/09 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
python追加元素到列表的方法
2015/07/28 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python实现网页自动签到功能
2019/01/21 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
python如何实现图片压缩
2020/09/11 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
UNIX文件类型
2013/08/29 面试题
大学生年度自我鉴定
2013/10/31 职场文书
电子商务专业学生的自我鉴定
2013/11/28 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
企业宣传方案
2014/03/04 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书