淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別
hide和fadeOut 顯示效果有什么區(qū)別？ show和fadeIn顯示效果都一樣？
很多朋友在學(xué)習(xí)jQuery的時(shí)候 會(huì)遇到這個(gè)問(wèn)題 ，hide和 fadeOut都可以帶有參數(shù)：
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
首先我們從名字上就可以看出 hide是隱藏而fadeOut是淡出，當(dāng)然名字不能看出具體的區(qū)別，只能體現(xiàn)他們是不同的而已。但是當(dāng)我們把參數(shù) speed 設(shè)置稍微長(zhǎng)一些就可以看出區(qū)別了。并且實(shí)現(xiàn)的效果顯示起來(lái)都差不多，所以被誤以為是一樣的，其實(shí)不然。
讓我們寫(xiě)下如下代碼：
<!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">點(diǎn)擊這里，使紅色矩形1淡出(fadeOut)</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br><br>
<button class="dll">點(diǎn)擊這里，使紅色矩形2隱藏(hide)</button>
<br><br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
好了 現(xiàn)在我們可以測(cè)試下了，怎么樣區(qū)別一目了然吧。
沒(méi)錯(cuò)，hide隱藏的效果是從下至上或從右下到左上的慢慢折疊縮小，而fadeOut的淡出效果是整體淡化直至消失。好了 現(xiàn)在我們可以測(cè)試下了，怎么樣區(qū)別一目了然吧。
同理 show和fadeIn也是這樣的區(qū)別，大家自己改下代碼試下吧。
以上這篇淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果,基于jquery實(shí)現(xiàn)頁(yè)面圖文定時(shí)滾動(dòng)效果,涉及jquery頁(yè)面元素的遍歷與樣式的動(dòng)態(tài)操作技巧,是一款經(jīng)典的jquery滾動(dòng)特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
下面小編就為大家?guī)?lái)一篇jquery 一鍵復(fù)制到剪切板的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
下面小編就為大家?guī)?lái)一篇jquery tmpl模板(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
jquery dialog鍵盤(pán)事件代碼，檢測(cè)回車(chē)等事件的觸發(fā)問(wèn)題。2010-08-08
基于jQuery滑動(dòng)桿實(shí)現(xiàn)購(gòu)買(mǎi)日期選擇效果
這是一款基于jQuery的滑動(dòng)桿購(gòu)買(mǎi)日期選擇插件，它的外觀仿的是阿里云的服務(wù)器購(gòu)買(mǎi)日期選擇界面。這款jQuery插件非常適合在一些虛擬產(chǎn)品購(gòu)買(mǎi)頁(yè)面上使用，它可以幫助你的用戶快速選擇產(chǎn)品的購(gòu)買(mǎi)日期，感興趣的朋友跟著小編學(xué)習(xí)吧2015-09-09
jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)炫麗的3d旋轉(zhuǎn)星空效果,涉及jQuery數(shù)值運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理
頁(yè)面加載后，對(duì)不合比例的圖片自動(dòng)進(jìn)行縮放和裁剪處理，兼容圖像已在緩存或不在緩存的情況，基于JQuery2014-01-01
本文主要介紹了jquery實(shí)現(xiàn)下拉框左右選擇功能的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了封裝了jQuery的Ajax請(qǐng)求全局配置的相關(guān)資料,需要的朋友可以參考下2015-02-02
下面小編就為大家分享一篇select獲取下拉框的值 下拉框默認(rèn)選中方法，具有很好的參考價(jià)值，希望對(duì)的有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02