运用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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
js实现菜单跳转效果
Dec 11 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
一个显示天气预报的程序
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
python字符串string的内置方法实例详解
2018/05/14 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python队列Queue的详解
2019/05/10 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
上课迟到检讨书
2014/01/19 职场文书
小学语文业务学习材料
2014/06/02 职场文书
关于保护环境的建议书
2014/08/26 职场文书
社区创先争优承诺书
2014/08/30 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
青年志愿者活动感想
2015/08/07 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python