运用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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
杏林同学录(六)
2006/10/09 PHP
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP页面中文乱码分析
2013/10/29 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python 循环数据赋值实例
2019/12/02 Python
python collections模块的使用
2020/10/16 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
初中生评语大全
2014/04/24 职场文书
社会实践单位意见
2015/06/05 职场文书
世界文化遗产导游词
2019/08/07 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis