jQuery效果(顯示隱藏,淡入淡出)

1.隱藏顯示,之前我們都是通過設置元素的css樣式來讓它顯示隱藏,現在我們只需要用

jQuery中的hide()和show()來實現這兩個功能。input點擊段落p進行顯示隱藏


$("input").click(function(){


$("p").show();? //hide();

})

$("p").show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。

jQuery toggle()

通過 jQuery,您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素,并隱藏已顯示的元素;

2.jQuery中的淡入淡出,

jQuery fadeIn() 用于淡入已隱藏的元素。$("p").fadeIn(speed,callback);

jQuery fadeOut() 用于淡入已顯示的元素。$("p").fadeOut(speed,callback);

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

???????????? 如果元素已淡出,則 fadeToggle() 會向元素添加淡入效果。

?????????? ? 如果元素已淡入,則 fadeToggle() 會向元素添加淡出效果。

????????????? $("p").fadeTaggle(speed,callback);

jQuery fadeTo() 方法允許漸變為給定的不透明度(值介于 0 與 1 之間)。

???????????? $("p").fade(speed,callback);

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 671評論 0 3
  • 警告請使用 document.write() 僅僅向文檔輸出寫內容。如果在文檔已完成加載后執行 document....
    鹿守心畔光閱讀 2,858評論 3 104
  • jQuery 安裝 把 jQuery 添加到您的網頁 如需使用 jQuery,您需要下載 jQuery 庫(會在下...
    Clover園閱讀 301評論 0 0
  • 請記得在進行JQuery類庫的運用時,加入JQuery類庫,并且要保證先寫文檔就緒函數 $(document).r...
    Sunshinemm閱讀 2,926評論 1 40
  • (續jQuery基礎(2)) 四、動畫篇 第1章 動畫基礎隱藏和顯示 (1)隱藏元素的hide方法 讓頁面上的元素...
    凜0_0閱讀 467評論 0 6