运用JQuery的toggle实现网页加载完成自动弹窗

2014-03-18 26

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中的私有成员
Sep 18 22
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 28
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 21
JavaScript 实现 Tab 点击切换实例代码
Mar 25 63
Vue中的验证登录状态的实现方法
Mar 09 15
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 32
Vue watch响应数据实现方法解析
Jul 10 19
手机访问当前页面