运用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 sortable效果 代码有错但值得看看
Nov 05 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
js运动动画的八个知识点
Mar 12 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
详解AngularJS controller调用factory
May 19 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
Vue中props的使用详解
Jun 15 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
如何在JS文件中获取Vue组件
Sep 16 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使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python Crypto模块的安装与使用方法
2017/12/21 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python制作mysql数据迁移脚本
2019/01/01 Python
pandas数据集的端到端处理
2019/02/18 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
python全栈开发语法总结
2020/11/22 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
小学门卫岗位职责
2013/12/17 职场文书
国庆宣传标语
2014/06/30 职场文书
岗位工作说明书
2014/07/29 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python