jQuery中 hide和fadeOut的差別 show和fadeIn的差別
- 巴扎黑原創
- 2017-06-29 11:59:561526瀏覽
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(){
$("#p1").fadeOut(3000);
});
});
$(document).ready(function(){
$("button.dll").click(function(){
$("#p2").hide(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button class="dl">点击这里，使红色矩形1淡出(fadeOut)</button>
<br><br>
<p id="p1" style="width:80px;height:80px;
background-color
:red;"></p>
<br><br>
<button class="dll">点击这里，使红色矩形2隐藏(hide)</button>
<br><br>
<p id="p2" style="width:80px;height:80px;background-color:red;"></p>
</body>
</html>
好了 現在我們可以測試下了，怎麼樣差別一目了然吧。
沒錯，hide#隱藏的效果是從下至上或從右下到左上的慢慢折疊縮小，而fadeOut#的淡出效果是整體淡化至消失。 好了 現在我們可以測試下了，怎麼樣差別一目了然吧。
同理 show#和fadeIn也是這樣的差別，大家自己改下程式碼試試吧。
#以上是jQuery中 hide和fadeOut的差別 show和fadeIn的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn