jQuery中 hide和fadeOut的区别 show和fadeIn的区别

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;"></div>
<br><br>
<button  class="dll">点击这里,使红色矩形2隐藏(hide)</button>
<br><br>
<div id="div2" style="width:80px;height:80px;"></div>
</body>
</html>

好了 现在我们可以测试下了,怎么样区别一目了然吧。

没错,hide隐藏的效果是从下至上或从右下到左上的慢慢折叠缩小,而fadeOut的淡出效果是整体淡化直至消失。好了 现在我们可以测试下了,怎么样区别一目了然吧。

同理 show和fadeIn也是这样的区别,大家自己改下代码试下吧。

转载http://blog.csdn.net/chelen_jak/article/details/17419015

时间: 2024-10-19 16:28:50

jQuery中 hide和fadeOut的区别 show和fadeIn的区别的相关文章

jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidth() = a+padding; outerWidth() = a+padding+border; outerWidth(true) = a+padding+border+margin; 在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(paddi

jQuery中的prop()和attr()的区别

1.jQuery中的prop()和attr()的区别 prop()是在jQuery1.6版本之后才有的,在之前一直都是使用attr(), prop()修复了attr()的一些小bug. 2.推荐用法: prop() :在HTML元素固有属性的时候用prop() attr() : 推荐在HTML非固有属性(自定义属性)的时候用attr() attr() 方法设置或返回被选元素的属性值. 根据该方法不同的参数,其工作方式也有所差异. //改变图片的width属性 $("img").attr

总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC" } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC" } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue" } p.p4 { margin

【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别

bind()                                                                                                                                                                                                        简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selecto

jquery中filter、find、children、contents、contains区别

虽然大多数前端都用jquery,可是对jquery这几个选择器在使用上的异同,大家应该平时不会太在意,或者也是一知半解吧! 下面简单总结了下: 1.filter: .filter( selector ) .filter( function(index) ) .filter( element ) .filter( jQuery object ) 和find区别是,find是对它的子集的操作,而filter是对自身集合元素的操作 2.find: .find( selector ) .find( jQ

JQuery中关于html()、text()、val()三者之间的区别

html():该方法类似于Javascrpt 中的innerHTML的方法,该方法获取标签元素中所有内容文本. text():该方法类似于Javascrpt 中的innerText方法,获取的是纯文本内容. val():获取对象的value的值.获取的是选择对象的第一个元素的value值.当然该属性并不局限于只有value的元素,对于表单元素都适合. <div id="one">hello <span>word</span></div>

jquery中的trigger和triggerHandler区别

我们在jQuery基础教程之如何注册以及触发自定义事件这篇文章中,有用到今天要讲的trigger方法.今天我们来简单看看jquery中的trigger何triggerHandler方法的区别:trigger( event, [data] )在每一个匹配的元素上触发某类事件.这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单.如果要阻止这种默认行为,应返回false.你也可以触发由bind()注册的自定义事件 $("p&q

JQuery中$.each 和$(selector).each()的区别详解

1.$(selector).each() jQuery 遍历 - each() 方法主要用于DOM遍历,each() 方法规定为每个匹配元素规定运行的函数. 语法: $(selector).each(function(index,element)) W3School上显示回调函数是必须的,index - 选择器的 index 位置,element - 当前的元素(也可使用 "this" 选择器). $().each,对于这个方法,在dom处理上面用的较多.如果页面有多个input标签类

jquery中html 与 text方法的区别

jquery中html 与 text方法的区别 24 May 2012/in 网站设计和开发 /by Bruce 接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别. 通常在用jquery写ajax时,都会用到html()这个方法,而不用text()这个方法,他们之间有什么区别呢?