jquery中fadeOut和hide之间的区别详解|三体教程
文章目录

jquery中fadeOut和hide之间的区别详解

在jquery中有fadeOut和hide两个方法,都可以让元素隐藏。

既然都有这个功能,为什么不只保留一个方法呢?

其实他们之间是有区别的,他们之间的显示效果不同。

先看看两者的使用方法:

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

光是从名字可以看出,fadeOut是淡的意思,hide是隐藏的意思,但这只是从字面上体现了他们的不同。

如果我们将其speed参数设置得稍长一些,就能看出其中的区别了。

如下代码:

html代码<p>演示带有不同参数的fadeOut()及hide()方法。</p>
<input type="button" id="btn1" value="点击使蓝色框淡出(fadeOut)" />
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:#00a0ea;"></div>
<br><br>
<input type="button" id="btn2" value="点击使黑色框隐藏(hide)" />
<br><br>
<div id="div2" style="width:80px;height:80px;background-color:#333333;"></div>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").fadeOut(3000);
  });
});
$(document).ready(function(){
  $("#btn2").click(function(){
    $("#div2").hide(3000);
  });
});
</script>
亲自测试一下

经过测试,我们看到了很明显的区别。

fadeOut淡出效果是将元素整体淡化逐渐消失。

hide隐藏效果是将元素从下到上,或从右下到左上慢慢的缩小折叠至消失。

同理可证,jquery的fadeIn和show区别也是一样的,不妨将代码改一下测试即可。

本文网址:http://www.santii.com/article/149.html


数据更新时间:2018-05-25