运用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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
深入理解React高阶组件
Sep 28 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 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将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
大一自我鉴定范文
2013/10/04 职场文书
自荐信的两点禁忌
2013/10/30 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
小学教学随笔感言
2014/02/26 职场文书
审计专业自荐信范文
2014/04/21 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS