运用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中的稀疏数组与密集数组[译]
Sep 17 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
详解vue引入子组件方法
Feb 12 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
漂亮但不安全的CTB
2006/10/09 PHP
PHP 面向对象详解
2012/09/13 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Python入门篇之函数
2014/10/20 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
工作作风建设心得体会
2014/10/22 职场文书
第一军规观后感
2015/06/12 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Css预编语言及区别详解
2021/04/25 HTML / CSS
golang elasticsearch Client的使用详解
2021/05/05 Golang