运用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 相关文章推荐
通过js获取div的background-image属性
Oct 15 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 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 flock 文件锁详细介绍
2012/12/29 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
JavaScript基本对象
2007/01/11 Javascript
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
React props和state属性的具体使用方法
2018/04/12 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
Python中return语句用法实例分析
2015/08/04 Python
python从入门到精通(DAY 1)
2015/12/20 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
信访工作汇报材料
2014/10/27 职场文书
初中中等生评语
2014/12/29 职场文书
面试通知邮件
2015/04/20 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
个人道歉信大全
2019/04/11 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript