运用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 相关文章推荐
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
svg动画之动态描边效果
Feb 22 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php 常用的系统函数
2017/02/07 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python实现在线音乐播放器
2017/03/03 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
Python实现画图软件功能方法详解
2020/07/28 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
前台接待的工作职责
2013/11/21 职场文书
网络优化专员求职信
2014/05/04 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
出生公证书
2015/01/23 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
同学聚会开幕词
2019/04/02 职场文书