hide和fadeOut 顯示效果有什么區(qū)別？ show和fadeIn顯示效果都一樣？
很多朋友在學(xué)習(xí)jQuery的時(shí)候 會(huì)遇到這個(gè)問題 ，hide和 fadeOut都可以帶有參數(shù)：
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
首先我們從名字上就可以看出 hide是隱藏而fadeOut是淡出，當(dāng)然名字不能看出具體的區(qū)別，只能體現(xiàn)他們是不同的而已。但是當(dāng)我們把參數(shù) speed 設(shè)置稍微長一些就可以看出區(qū)別了。并且實(shí)現(xiàn)的效果顯示起來都差不多，所以被誤以為是一樣的，其實(shí)不然。
讓我們寫下如下代碼：
<!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)在我們可以測試下了，怎么樣區(qū)別一目了然吧。
沒錯(cuò)，hide隱藏的效果是從下至上或從右下到左上的慢慢折疊縮小，而fadeOut的淡出效果是整體淡化直至消失。好了 現(xiàn)在我們可以測試下了，怎么樣區(qū)別一目了然吧。
同理 show和fadeIn也是這樣的區(qū)別，大家自己改下代碼試下吧。
以上這篇淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
