运用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 01 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
jquery实现数字输入框
Feb 22 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
解析vue中的$mount
Dec 21 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
Seajs源码详解分析
2019/04/02 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Python base64编码解码实例
2015/06/21 Python
Python Cookie 读取和保存方法
2018/12/28 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python每天定时运行某程序代码
2019/08/16 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
wxPython实现文本框基础组件
2019/11/18 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
主治医师岗位职责
2013/12/10 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
个人作风剖析材料
2014/02/02 职场文书
师德演讲稿范文
2014/05/06 职场文书
总经理任命书范本
2014/06/05 职场文书
国际会计专业求职信
2014/08/04 职场文书
2014年建筑工作总结
2014/11/26 职场文书
元旦主持词开场白
2015/05/29 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers
django 认证类配置实现
2021/11/11 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android