Jquery ui datepicker設置日期范圍，如只能隔3天【實現代碼】
657
2024-03-06
hide和fadeOut 顯示效果有什么區別？ show和fadeIn顯示效果都一樣？
很多朋友在學習jQuery的時候 會遇到這個問題 ，hide和 fadeOut都可以帶有參數：
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
首先我們從名字上就可以看出 hide是隱藏而fadeOut是淡出，當然名字不能看出具體的區別，只能體現他們是不同的而已。但是當我們把參數 speed 設置稍微長一些就可以看出區別了。并且實現的效果顯示起來都差不多，所以被誤以為是一樣的，其實不然。
讓我們寫下如下代碼：
<!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>演示帶有不同參數的 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>
好了 現在我們可以測試下了，怎么樣區別一目了然吧。
沒錯，hide隱藏的效果是從下至上或從右下到左上的慢慢折疊縮小，而fadeOut的淡出效果是整體淡化直至消失。好了 現在我們可以測試下了，怎么樣區別一目了然吧。
同理 show和fadeIn也是這樣的區別，大家自己改下代碼試下吧。
以上這篇淺談jQuery中hide和fadeOut的區別 show和fadeIn的區別就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。
