淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別
更新時間：2016年08月18日 11:01:57 投稿：jingxian
下面小編就為大家?guī)硪黄獪\談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
hide和fadeOut 顯示效果有什么區(qū)別？ show和fadeIn顯示效果都一樣？
很多朋友在學習jQuery的時候 會遇到這個問題 ，hide和 fadeOut都可以帶有參數(shù)：
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
首先我們從名字上就可以看出 hide是隱藏而fadeOut是淡出，當然名字不能看出具體的區(qū)別，只能體現(xiàn)他們是不同的而已。但是當我們把參數(shù) speed 設置稍微長一些就可以看出區(qū)別了。并且實現(xiàn)的效果顯示起來都差不多，所以被誤以為是一樣的，其實不然。
讓我們寫下如下代碼：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.dl").click(function(){
$("#div1").fadeOut(3000);
});
});
$(document).ready(function(){
$("button.dll").click(function(){
$("#div2").hide(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數(shù)的 fadeOut() 方法。</p>
<button class="dl">點擊這里，使紅色矩形1淡出(fadeOut)</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br><br>
<button class="dll">點擊這里，使紅色矩形2隱藏(hide)</button>
<br><br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
好了 現(xiàn)在我們可以測試下了，怎么樣區(qū)別一目了然吧。
沒錯，hide隱藏的效果是從下至上或從右下到左上的慢慢折疊縮小，而fadeOut的淡出效果是整體淡化直至消失。好了 現(xiàn)在我們可以測試下了，怎么樣區(qū)別一目了然吧。
同理 show和fadeIn也是這樣的區(qū)別，大家自己改下代碼試下吧。
以上這篇淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JQuery表單驗證插件EasyValidator用法,以實例形式系統(tǒng)分析了EasyValidator的功能特性及具體用法,是非常實用的jQuery插件,需要的朋友可以參考下2014-11-11
關(guān)于jQuery的DOM操作面試問題其實有很多，下面這篇文章主要給大家介紹了jQuery常見面試題之DOM操作的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
最近的項目中，好幾次用到操作文本域的方法，比如光標位置、刪除光標前字符等。每次都是查閱資料（這部分操作涉及到的js方法都比較生僻），費時費事。于是就封裝了一個jQuery擴展2014-03-03
這篇文章主要為大家詳細介紹了jQuery驗證插件validate的使用方法，jQuery.validate.js插件用于對表單輸入進行驗證，對驗證插件感興趣的小伙伴們可以參考一下2016-05-05
這里給大家推薦幾款比較好用實用易用的jQuery帶箭頭提示框tooltips插件，兼容性都很不錯，大家根據(jù)需要自由選擇吧2014-11-11
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片自動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
juqery 學習之三 選擇器 簡單 內(nèi)容，學習jquery的朋友可以參考下。2010-11-11
為促進大家交流與學習，開源此插件。在此感謝非老大開源！不多說了，先圖片后代碼。2010-10-10
真正的JQuery.ajax傳遞中文參數(shù)的解決方法
許多人在使用JQuery.ajax方法時肯定會遇到一個問題。在編碼不是UTF-8的時候，當傳遞的參數(shù)里有中文的時候，服務端Request的時候都會出現(xiàn)亂碼。2011-05-05
這篇文章主要介紹了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能,結(jié)合實例形式分析了easyUI 后臺數(shù)據(jù)交互、分頁與前臺顯示相關(guān)操作技巧及注意事項,需要的朋友可以參考下2020-06-06