首先我們從名字上就可以看出 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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: