Rumah > Artikel > hujung hadapan web > jQuery中 hide和fadeOut的区别 show和fadeIn的区别
jQuery中 hide和fadeOut的区别 show和fadeIn的区别
- 巴扎黑asal
- 2017-06-29 11:59:561483semak imbas
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也是这样的区别，大家自己改下代码试下吧。
Atas ialah kandungan terperinci jQuery中 hide和fadeOut的区别 show和fadeIn的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：身日了解jQuery中fadeOut()方法的使用Artikel seterusnya：Vue.js搭建路由报错如何解决？