運用JQuery的toggle實現(xiàn)網(wǎng)頁加載完成自動彈窗
更新時間:2014年03月18日 17:37:09 作者:
toggle()事件 它主要切換元素的可見狀態(tài),下面為大家介紹下運用JQuery的toggle實現(xiàn)網(wǎng)頁加載完成自動彈窗
toggle()事件 它主要切換元素的可見狀態(tài)。
1、toggle(switch) ①switch是一個可選值,如果不填則原來元素是顯示則將其隱藏,如果是隱藏則顯示。
HTML 代碼:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代碼:
$("p").toggle()
結(jié)果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
② switch如果有值則是TRUE或false,如果是TRUE則顯示元素,F(xiàn)ALSE隱藏元素。
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是可選參數(shù)它表示元素動畫的速度,元素以動畫的“滑動”的方式進行顯示或隱藏,它的值可以使(slow、 normal 、fast); [callback]為函數(shù)可以執(zhí)行的方法。
HTML代碼
<p style="display: none" id = "t">Hello Again</p>
JQuery代碼
$("#t").toggle("slow",function(){
alert("123456");
});
即:當用運用第二種方法時,隱藏speed則可以進行網(wǎng)頁加載自動彈屏
1、toggle(switch) ①switch是一個可選值,如果不填則原來元素是顯示則將其隱藏,如果是隱藏則顯示。
HTML 代碼:
復制代碼 代碼如下:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代碼:
復制代碼 代碼如下:
$("p").toggle()
結(jié)果:
復制代碼 代碼如下:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
② switch如果有值則是TRUE或false,如果是TRUE則顯示元素,F(xiàn)ALSE隱藏元素。
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是可選參數(shù)它表示元素動畫的速度,元素以動畫的“滑動”的方式進行顯示或隱藏,它的值可以使(slow、 normal 、fast); [callback]為函數(shù)可以執(zhí)行的方法。
HTML代碼
復制代碼 代碼如下:
<p style="display: none" id = "t">Hello Again</p>
JQuery代碼
復制代碼 代碼如下:
$("#t").toggle("slow",function(){
alert("123456");
});
即:當用運用第二種方法時,隱藏speed則可以進行網(wǎng)頁加載自動彈屏
相關文章
基于jQuery的為attr添加id title等效果的實現(xiàn)代碼
下面的例子是通過jquery為連接增加title描述的代碼,在當前頁的連接上寫上,你好,現(xiàn)在在試驗連接文字的簡單描述。2011-04-04
利用Jquery實現(xiàn)幾款漂亮實用的時間軸(附示例代碼)
這篇文章主要介紹了利用Jquery實現(xiàn)幾款漂亮的時間軸示例代碼,文中利用Jquery實現(xiàn)了縱向折疊時間軸、縱向鼠標滑動時間軸、縱向可折疊時間軸以及橫向時間軸,每種時間軸都給出了完整的示例代碼,需要的朋友可以參考學習。2017-02-02
jQuery動畫效果animate和scrollTop結(jié)合使用實例
animate是jq的一個特效的函數(shù)方法,animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。2014-04-04
從零開始學習jQuery (六) jquery中的AJAX使用
本篇文章講解如何使用jQuery方便快捷的實現(xiàn)Ajax功能.統(tǒng)一所有開發(fā)人員使用Ajax的方式.2011-02-02
jQuery實現(xiàn)的文字hover顏色漸變效果實例
這篇文章主要介紹了jQuery實現(xiàn)的文字hover顏色漸變效果,以完整實例形式分析了jQuery實現(xiàn)文字顏色漸變效果的相關技巧,涉及jQuery插件jquery-ui-1.8.16.custom.min.js的使用,需要的朋友可以參考下2016-02-02

