分享jQuery知識之jQuery效果隱藏與顯示、淡入淡出、滑動、回調

2021-01-18 標標編程

今天和大家分享jQuery的知識：jQuery的效果，jQuery效果包含有，jQuery顯示與隱藏、淡入淡出、滑動、回調。下面來一一介紹。

jQuery顯示與隱藏

1）、通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素。

語法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

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

示例代碼如下：

使用 hide() 和 show() 方法來隱藏和顯

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

顯示被隱藏的元素，並隱藏已顯示的元素。示例代碼如下：

toggle() 方法來切換 hide() 和 show()

jQuery淡入淡出

通過 jQuery，您可以實現元素的淡入淡出效果。

1)、jQuery fadeIn() 用於淡入已隱藏的元素。

語法:$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。.

可選的 callback 參數是 fading 完成後所執行的函數名稱。

2）、jQuery fadeOut() 方法用於淡出可見元素。

語法:$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。示例代碼如下：

fadeIn()與fadeOut() 方法

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

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

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

語法:$(selector).fadeToggle(speed,callback);

speed（可選的 ） 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

callback 參數是可選的 ， fading 完成後所執行的函數名稱。

下面的例子演示了帶有一個參數毫秒的 fadeToggle() 方法：

fadeToggle()的用法

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

語法:$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。

下面的例子演示了帶有不同參數的 fadeTo() 方法：

jQuery fadeTo() 方法

Query滑動

jQuery 滑動方法可使元素上下滑動。

通過 jQuery，您可以在元素上創建滑動效果。

1）、jQuery slideDown() 方法用於向下滑動元素。

語法：$(selector).slideDown(speed,callback);

speed 參數可選的，規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

示例代碼說明如下：

jQuery slideDown() 方法

2）、jQuery slideUp() 方法用於向上滑動元素。

語法：$(selector).slideUp(speed,callback);

參數speed可選的 ，規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

callback 參數是可選的，滑動完成後所執行的函數名稱。

jQuery slideUp() 方法

3）、jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

如果元素向下滑動，則 slideToggle() 可向上滑動它們。

如果元素向上滑動，則 slideToggle() 可向下滑動它們。

語法：$(selector).slideToggle(speed,callback);

speed 參數可選的，它規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

參數callback 是可選的，滑動完成後所執行的函數名稱。

代碼示例如下：

jQuery slideToggle() 方法

Query回調

回調函數在當前動畫 全部完成之後執行。

許多 jQuery 函數涉及動畫。這些函數也許會將 speed或 duration 作為可選參數。

例子：$("p").hide(1000)

speed或 duration 參數可以設置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。

以下實例在隱藏效果完全實現後回調函數

回調函數

以上就是分享的jQuery顯示與隱藏、淡入淡出、滑動、回調的jQuery知識，當然由於水平有限，本文中有理解不到或者理解錯誤之處在所難免，敬請讀者批評指正，或者在下方留言評論，有則改之無則加勉。

相關焦點

  • jquery中淡入淡出切換效果函數使用方法?
    jquery是javascript很常用和熱門的一個類庫，前端開發人員必須學習的一個js類庫，接下來來看看怎麼使用jquery中的怎麼切換使用淡入淡出方法。jquery最大的特點就是極大地簡化了 JavaScript 編程。而且使用起來也是很簡單的，比javascript更方便簡單。
  • jQuery的fadeIn()、fadeOut()和fadeTo()設置元素的淡入淡出效果
    #JavaScript#在jQuery中，封裝了一套用於對Html元素執行顯示和隱藏的淡入和淡出效果的方法，目的是讓Html元素顯示/隱藏的更優雅，給用戶一種良好的頁面體驗。，以淡入的方式將隱藏的元素顯示出來。
  • 使用jQuery的animate()+CSS樣式實現動畫效果及stop()停止動畫
    01第1節：jQuery動畫概述#JavaScript#在jQuery中，除了可以淡入淡出、滑動效果之外，還可以使用animate()方法創建自定義的動畫效果。對於自定義的動畫函數animate()方法，可以設置一些參數、速度和回調函數，以更靈活的配置動畫效果的呈現。
  • jQuery使用hide()和show()隱藏顯示元素,toggle()顯示和隱藏切換
    Hide()方法和show()方法通常配合使用，一起實現Html元素的顯示和隱藏得到某種動態效果。一、顯示/隱藏基本使用下面我們列舉一個例子，實際演示一下jQuery的顯示和隱藏方法的使用。圖3這樣呈現出來的效果，元素的顯示和隱藏不是一下子出來的，而是慢慢的顯示和隱藏。三、更多的使用方法針對show()和hide()方法，還可以具有第二個參數，用於執行一段JS代碼回調函數。
  • 10個非常炫酷的jQuery相冊動畫賞析
    3D相冊分享給你的朋友吧。 在線演示        源碼下載 5、jQuery/CSS3動畫相冊圖片瀏覽插件 今天這款jQuery相冊插件正好彌補了動畫的缺陷，由於CSS3特性的利用，當我們點擊圖片瀏覽的時候，縮略圖就會以淡入淡出的動畫效果消失
  • jquery技巧之讓任何組件都支持類似DOM的事件管理
    在jquery的幫助下，使用這個方法來管理普通對象的事件就跟管理DOM對象的事件一模一樣，雖然在最後當你看到這個小技巧的具體內容時，你可能會覺得原來如此或者不過如此，但是我覺得如果能把普通的發布-訂閱模式的實現改成DOM類似的事件機制，那開發出來的組件一定會有更大的靈活性和擴展性，而且我也是第一次使用這種方法（見識太淺的原因），覺得它的使用價值還蠻大的，所以就把它分享出來了。
  • 使用jQuery的網格導航效果
    今天我們想要使用jQuery分享一些整潔的網格導航效果。在我們的例子中，我們將向您展示如何瀏覽一組縮略圖的十種方法。我們將看看一些可能性以及如何應用效果。今天我們想要使用jQuery分享一些整潔的網格導航效果。
  • 每個程式設計師都會的 35 個 jQuery 小技巧
    隱藏搜索文本框文字Hide when clicked in the search field, the value.，它們可以使元素顯示效果更好。但是如果你希望元素顯示時使用***種效果，而消失時使用第二種效果，則可以這麼做： $('.btn').click(function () {   $('.element').fadeToggle('slow'); });  $('.btn').click(function () {   $('.element').slideToggle('slow'); });
  • jQuery的$.get()、$.post()和$.ajax()以GET/POST方式請求數據
    POST請求時，URL地址是隱藏起來的，不能被收藏。在jQuery的Ajax技術中，可以使用的有3個方法：$.get()方法主要用於以HTTP GET的方式請求數據。$.post()方法主要用於以HTTP POST的方式請求數據。
  • jQuery升級踩坑大全
    不過一直採用這個庫終究不是長久之計，開發中建議使用jQuery Migrate的開發版，可以在瀏覽器控制臺上列印出來不兼容的地方詳細信息。新版本中應該使用off函數代替之，替換方式類似。　　3.使用了被廢棄的jQuery.fn.toggle函數　　jQuery Migrate對此錯誤的警告是：JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated　　早期jQuery中名字叫toggle的函數有兩個，一個是用於控制元素的顯示和隱藏，這個用途的函數目前jQuery中依舊存在；另一個就是上面提到的被廢棄的
  • 期待已久的2012年度最佳jQuery插件揭曉
    雖然 CSS3 也能夠實現字符旋轉效果，但是要讓安排每個字母都沿著彎曲路徑排布相當的複雜，Arctext.js 則可以輕鬆實現。 stellar.js正如它的口號所說：Parallax has never been easier，的確，它能幫助輕鬆的實現網頁視差滾動效果。
  • 剪輯音頻文件時,怎麼給音頻添加上淡入淡出的效果?
    當然，音頻剪輯工具中，提供了一系列的功能，比如說剪切、複製、粘貼、插入音頻、添加效果等多種編輯功能，使我們可以簡單的對錄製好的音頻文件重新編輯並製作鈴聲。我們在平時剪輯音頻文件的時候，往往需要給音頻文件添加一些效果，比如說淡入淡出效果，那麼如何添加淡入淡出效果呢？現在就把操作步驟分享出來，供大家參考使用。
  • 第10篇:jQuery事件與動畫
    <html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="script/jquery
  • 實現 Bilibili 視頻播放Chrome 媒體控制效果
    今日早讀文章由阿里@蒲歡授權分享。正文從這開始~~Chrome 最新的版本更新了媒體控制菜單的按鈕 UI，也就是每次我們的網頁產生聲音或者視頻時候，菜單欄頭像附近，方便我們在多個 Tab 進行控制時候加的，方便我們操作這些網頁 Tab 下面的音視頻。尤其最新的樣式實現非常酷炫，加入對封面的支持，這樣整體效果看著非常棒。
  • 【第2009期】實現 Bilibili 視頻播放Chrome 媒體控制效果
    今日早讀文章由阿里@蒲歡授權分享。正文從這開始~~Chrome 最新的版本更新了媒體控制菜單的按鈕 UI，也就是每次我們的網頁產生聲音或者視頻時候，菜單欄頭像附近，方便我們在多個 Tab 進行控制時候加的，方便我們操作這些網頁 Tab 下面的音視頻。尤其最新的樣式實現非常酷炫，加入對封面的支持，這樣整體效果看著非常棒。
  • Pr:視頻過渡效果
    中心拆分 Center Split剪輯 A 分成四部分，並內滑到角落以顯示剪輯 B。內滑 Slide剪輯 B 滑動到剪輯 A 上面。在淡入剪輯 B 的同時淡出剪輯 A，如果希望從黑色淡入或淡出時很適合，所以同樣適合在剪輯的單側使用它來過渡。
  • 《逃亡花》她總是這麼淡入淡出
    所以她總是這麼淡入淡出………因為AV界保持著若即若離的美妙關係
  • 有一種緣分叫做淡入淡出(經典美文)
    在這種時候，似乎那句「自掃門前雪，休管別人瓦上霜」的驚世駭俗之語被更多人從腦海中帶入現實世界。這無形中衝淡了人與人之間的交往熱情。而人，即使在當前的生活條件下，也終究不過是幾十年光景。晚年，在他回首往事的時候，那些不應有的冷漠、絕情、欺矇，甚至險惡，都將如潮般湧上心頭。自強者，尚能嫣然一笑；自悲者，定然奄奄一息，加速滅亡。