运用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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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
自动分页的不完整解决方案
2007/01/12 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
安全教育观后感
2015/06/17 职场文书
发票退票证明
2015/06/24 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
如何在Python中妥善使用进度条详解
2022/04/05 Python
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电