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中文網其他相關文章!