运用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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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+ajax 无刷新删除数据
2010/02/20 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python pymongo模块用法示例
2018/03/31 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
介绍一下木马病毒的种类
2015/07/26 面试题
医药专业推荐信
2013/11/15 职场文书
合作协议书
2014/04/23 职场文书
产品发布会策划方案
2014/05/12 职场文书
大学生求职信
2014/06/17 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
骨干教师事迹材料
2014/12/17 职场文书
小学中队活动总结
2015/05/11 职场文书
红与黑读书笔记
2015/06/29 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android