快捷導(dǎo)航

淺談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顯示效果都一樣？

很多朋友在學(xué)習(xí)jQuery的時候會遇到這個問題，hide和 fadeOut都可以帶有參數(shù)：

$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);

首先我們從名字上就可以看出 hide是隱藏而fadeOut是淡出，當(dāng)然名字不能看出具體的區(qū)別，只能體現(xiàn)他們是不同的而已。但是當(dāng)我們把參數(shù) speed 設(shè)置稍微長一些就可以看出區(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: