运用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对象及属性
Feb 13 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
javascript 节点遍历函数
Mar 28 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
Element MessageBox弹框的具体使用
Jul 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数组是否为索引数组的实现方法
2013/06/13 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
js实现3D旋转相册
2020/08/02 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
用Python创建声明性迷你语言的教程
2015/04/13 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python中自带的三个装饰器的实现
2019/11/08 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
接口可以包含哪些成员
2012/09/30 面试题
自荐信格式的六要素
2013/09/21 职场文书
公司建议书怎么写
2014/05/15 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书