运用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 封装Ajax传递的数据代码
Jun 05 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
vue select 获取value和lable操作
Aug 28 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php中的三元运算符使用说明
2011/07/03 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
增大python字体的方法步骤
2020/07/05 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
季度思想汇报
2014/01/01 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python