运用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 ui dialog里调用datepicker的问题
Aug 06 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue里使用create, mounted调用方法
Apr 26 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
PHP开发中常用的8个小技巧
2008/08/27 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
Python中文件操作简明介绍
2015/04/13 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
Python 中random 库的详细使用
2021/06/03 Python