jquery中淡入淡出切換效果函數使用方法?

2021-01-18 百度經驗

jquery是javascript很常用和熱門的一個類庫，前端開發人員必須學習的一個js類庫，接下來來看看怎麼使用jquery中的怎麼切換使用淡入淡出方法。jquery最大的特點就是極大地簡化了 JavaScript 編程。而且使用起來也是很簡單的，比javascript更方便簡單。但是前提還是建議你先去學習了javascript的基礎再來學習jquery吧。

我使用一款開發工具。前期推薦使用editplus，有利於練習自己的基礎

新建一個html文件，引入jquery類庫文件，沒有的自己到jquery的官方下載，切記不要去第三方下載，最好是到官方下載哦。

加一個div標籤，用來顯示效果，加一個input標籤，來實現單擊事件的效果函數。<body> <div style="width:300px; height: 300px; background-color:pink"></div> <input type="button" value="切換" onclick="f1()"/> </body>

在 <script language="javascript" type="text/javascript"><!--//-->  </script>寫入js代碼：function f1(){ $("div").fadeToggle(1000); }

運行看看效果出來了。點擊隱藏，再次點擊則顯示

關於fadeToggle(speed,callback)參數的問題speed:速度毫秒單位callback:回調函數，執行完後執行的函數例如：加入一個匿名函數在裡面點擊切換完後回彈出對話框

相關焦點

  • jQuery的fadeIn()、fadeOut()和fadeTo()設置元素的淡入淡出效果
    封裝了一套用於對Html元素執行顯示和隱藏的淡入和淡出效果的方法，目的是讓Html元素顯示/隱藏的更優雅，給用戶一種良好的頁面體驗。Html元素的淡入和淡出主要是使用fadeIn()和fadeOut()這2個方法實現的。
  • 分享jQuery知識之jQuery效果隱藏與顯示、淡入淡出、滑動、回調
    今天和大家分享jQuery的知識：jQuery的效果，jQuery效果包含有，jQuery顯示與隱藏、淡入淡出、滑動、回調。下面來一一介紹。jQuery顯示與隱藏1）、通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素。
  • 使用jQuery的animate()+CSS樣式實現動畫效果及stop()停止動畫
    01第1節：jQuery動畫概述#JavaScript#在jQuery中，除了可以淡入淡出、滑動效果之外，還可以使用animate()方法創建自定義的動畫效果。對於自定義的動畫函數animate()方法，可以設置一些參數、速度和回調函數，以更靈活的配置動畫效果的呈現。
  • jQuery使用hide()和show()隱藏顯示元素,toggle()顯示和隱藏切換
    ，還可以使用show()方法顯示指定的Html元素。Hide()方法和show()方法通常配合使用，一起實現Html元素的顯示和隱藏得到某種動態效果。一、顯示/隱藏基本使用下面我們列舉一個例子，實際演示一下jQuery的顯示和隱藏方法的使用。
  • 剪輯音頻文件時,怎麼給音頻添加上淡入淡出的效果?
    喜歡音樂的小夥伴，都會使用音樂音頻編輯軟體進行剪輯，發揮自己的才能，創造出有趣的音樂！當然，音頻剪輯工具中，提供了一系列的功能，比如說剪切、複製、粘貼、插入音頻、添加效果等多種編輯功能，使我們可以簡單的對錄製好的音頻文件重新編輯並製作鈴聲。
  • 使用jQuery的網格導航效果
    今天我們想要使用jQuery分享一些整潔的網格導航效果。在我們的例子中，我們將向您展示如何瀏覽一組縮略圖的十種方法。我們將看看一些可能性以及如何應用效果。今天我們想要使用jQuery分享一些整潔的網格導航效果。
  • 10個非常炫酷的jQuery相冊動畫賞析
    1、HTML5/CSS3圖片左右切換彈性動畫 這是一款很有特點的HTML5圖片切換動畫，點擊左右按鈕即可將圖片進行彈性切換，圖片在被切換時，都會產生一定的彈性緩衝動畫效果。這款HTML5圖片應用非常適合在產品宣傳頁面上使用，看上起十分大氣。
  • jQuery升級踩坑大全
    使用了被廢棄的jQuery.fn.live方法　　jQuery Migrate庫對此錯誤也在控制臺有相應的警告：JQMIGRATE: jQuery.fn.live() is deprecated　　live方法原本的作用是設置事件代理，該方法在jQuery1.7之後就不推薦使用了，取代之的是jQuery.fn.on函數。
  • jquery技巧之讓任何組件都支持類似DOM的事件管理
    在jquery的幫助下，使用這個方法來管理普通對象的事件就跟管理DOM對象的事件一模一樣，雖然在最後當你看到這個小技巧的具體內容時，你可能會覺得原來如此或者不過如此，但是我覺得如果能把普通的發布-訂閱模式的實現改成DOM類似的事件機制，那開發出來的組件一定會有更大的靈活性和擴展性，而且我也是第一次使用這種方法（見識太淺的原因），覺得它的使用價值還蠻大的，所以就把它分享出來了。
  • 每個程式設計師都會的 35 個 jQuery 小技巧
    如果你想要更簡潔的代碼，可以使用 toggleClass 方法：$('.btn').hover(function () {   $(this).toggleClass('hover'); }); 註：直接使用CSS實現該效果可能是更好的解決方案，但你仍然有必要知道該方法。
  • 如何使用模塊化?
    當時使用子執行函數來解決這些問題，比如經典的jquery就使用了匿名自執行函數封裝代碼，將他們全都掛載到全局變量jquery下邊在js出現的時候，js一般只是用來實現一些簡單的交互，後來js開始得到重視，用來實現越來越複雜的功能，而為了維護的方便，我們也把不同功能的js抽取出來當做一個js文件，但是當項目變的複雜的時候，一個html頁面可能需要加載好多個
  • 第10篇:jQuery事件與動畫
    jQuery封裝的常用事件如下表所示：ready(fn)是jQuery最重要的事件處理函數，它在網頁內的DOM元素全部加載完成後觸發，它完全可以替代Window對象的load事件，通過使用這個方法,可以在DOM載入就緒時，立即執行DOM元素綁定的函數，並且大多數JavaScript函數都需要在這個方法內執行，參數fn是ready事件的處理函數。
  • 高級LED效果燈的電容式感應是如何設計的
    一些應用除了簡單地開啟和關閉LED之外還需要更多視覺效果。舉例來說，筆記本電腦可在設備待機狀態下讓電源LED閃爍，亮度發生明暗變化，形成一種所謂的呼吸效應，這也是設備中使用的眾多LED效果（淡入淡出或閃爍）之一。高級LED效果結合電容式觸摸按鍵能提高系統的美感並改善用戶體驗。 我們通常希望使用同一片上系統（SoC）來實現多種特性，從而降低BOM成本。
  • jQuery的$.get()、$.post()和$.ajax()以GET/POST方式請求數據
    $.get()方法在jQuery中，對於HTTP GET的請求，專門封裝了$.get()方法進行專項的GET請求，這樣當我們只需要獲取數據時，直接使用$.get()專項方法從遠程伺服器拿數據即可。第2個callback參數是可選的，功能是請求成功後所要處理的函數代碼。使用$.get()方法主要是從遠程伺服器上獲取數據。現在使用jQuery的$.get()方法從遠程的ASP.NET伺服器上獲取內容。
  • 有一種緣分叫做淡入淡出(經典美文)
    所以，在某種意義上來講，世界上沒有任何一個人可以完全走入他人的空間中去。那些熱衷於追逐肉體的，我們稱之為「肉慾」；那些沉湎於追求利益的，我們稱之為「物慾」；那些醉心於找尋理想的，我們稱之為「求知慾」：這一切的一切，儘管都是不完美的，不終極的，抑或不永恆的，但至少是自我意識。
  • 使用都卜勒曲線效果快速把普通歌曲文件變成3D立體環繞音樂
    在歌曲剪輯中除了裁剪或者給歌曲聲音變調之外，我們還可以使用audition進行歌曲文件的3D立體環繞效果的設置，而且還能給歌曲添加自己想要的和聲和對唱效果，這一點利用的就是變調的方式進行實現的一、變調實現歌曲對唱效果在歌曲文件中我們可以通過變調的方式進行男女聲的聲音改變
  • 《逃亡花》她總是這麼淡入淡出
    都是豆瓣電影中罕見的——超低分。還傍上了一個不要臉的中國女演員叫馬娳穎。就在2012年同一年中，他出演了好幾部正劇，但其中有一部就是和柚木提娜一起上演的，感覺他又要操回老本行，他是能夠跨界的大明星。所以她總是這麼淡入淡出………因為AV界保持著若即若離的美妙關係
  • 於瑤:淡入淡出勾勒青島美
    於瑤：淡入淡出勾勒青島美 青島全搜索電子報   2020.10.26 星期一     淡入淡出的日常，被輕輕淺淺的水墨融入了畫家對生活的有所思，勾勒到畫紙上，於是，有了《淡墨引——於瑤繪畫小品展》。「這些小品，多為雅趣。」正在曉芳齋布展的於瑤說自己的繪畫多取材於生活。「我的每一幅畫都有情感的介入，畫畫的時候都是有感而發。 」    於瑤的水墨畫，目前主要集中創作於兩類題材：青島裡院建築與自然風景。
  • Excel Column函數和Columns函數的使用方法,含Column($1:$5)實例
    在 Excel 中，Column函數用於返回單元格的列號，一次既可以返回一列的列號，也可以返回多列的列號；而Columns函數作用是返回數組或引用單元格的列數。Column函數通常與Indirect函數、If函數、Index函數、VlookUp函數、SumProduct函數、Mod函數組合使用。
  • 巧用CSS cross-fade(.)實現背景圖像半透明效果
    可能大部分人想到的是將兩個img用定位的方式疊加在一起，分別設置透明度，當然這個辦法是可行的，其實css還提供了一個cross-fade()方法，講兩張圖片作為背景圖引入，可以實現相同的效果。