jquery中使元素显示和隐藏方法之间的区别

在实际的项目开发中，要使一个元素隐藏的方法有很多，比如css的多种属性和jquery的多种方法，虽然他们的作用都是使元素不可见，但是各个方法实现的原理是不一样的。下面主要介绍jquery各个元素隐藏方法之间的区别。

1、show()和hide()

使用hide()方法隐藏元素实际上是同时减少元素的高度、宽度以及不透明度，直到这三个属性为0，最后设置元素的css属性disolay:none。show()方法从上到下增大元素的高度，从左到右增大元素的宽度，同时增加内容的不透明度，直至元素完全显示。

2、fadeIn()和fadeOut()

这两种方法使元素隐藏或显示的时候只改变元素的不透明度。

3、slideUp()和slideDown()

这两种方法使元素隐藏或显示的时候只改变元素的高度。slideDown()显示的时候是从上到下，slideUp()隐藏时是从下到上。

上述三种方法里面都可以传递两个参数，第一个参数是元素显示或隐藏的过度效果，可以传递具体的时间值，也可以传递各个方法规定好的显示隐藏方式值，第二个是回调函数，在元素显示或隐藏后要执行的其他操作。

除了以上介绍的方法外，jquery的animate()方法也可以使元素隐藏，它的原理是使用css的属性。该方法可以接受三个参数，第一个是css属性，第二个是过度效果，第三个是回调函数。

时间： 2024-08-01 10:46:24

jquery中使元素显示和隐藏方法之间的区别的相关文章

ZBrush中物体的显示与隐藏方法

在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选择的网格参与编辑,而隐藏的网格不参与编辑. 操作方法:按住Shift和Ctrl键,在文档视图区域按住鼠标左键并拖拽,绿色矩形框下被覆盖的网格将被选择,而没有被覆盖的网格将被隐藏.如果按住Shift和Ctrl键,在文档视图区按住鼠标左键并拖拽产生绿色矩形框时释放Shift键之后再按住Alt键,绿色矩形

jQuery中preventDefault()、stopPropagation()、return false 之间的区别

一.preventDefault()方法,阻止浏览器默认行为 浏览器有很多默认行为,比如form表单的submit按钮一点击,默认行为就要开始提交表单. 再比如 <a href="http://www.klmai.cn">内部优惠券</a> a链接一点击默认触发的行为就是浏览器地址栏变化后跳转到指定的网站.要阻止这种默认行为我们可以用preventDefault()方法.实例如下: <div class="div1"> 阻止浏览器

AngularJS入门（用ng-hide指令实现元素显示和隐藏）

控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"&

Jquery中each的三种遍历方法

Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(data) { $.each(data, function(n,value) { });}); 1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,dom

jQuery 获取兄弟元素的几种方法

jQuery 获取兄弟元素的几种方法. 获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression. 如果要获取下例中所有的 h1的直接兄弟元素h2 <div> <h1>Main title</h1> <h2>Section title</h2> <p>Some content...</p> <h2>Section

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

jQuery -&gt; 获取后代元素的三种方法

如果我们有内容如下的html文件,那么如何选取包含在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代 紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住してきた.これによって弥生時代が始まった. 縄文人も南方から伝わった稲を栽培していたが.彼らは原野を開いて大掛かりな水田をつくる発想を持たなかった.しかし.北九州に新たな文化を持って集団が来たのを知った彼らは次第に.水稲工作を受け入れ弥生人へとか分かっていた. html源码如下 <h1>邪馬台国の謎と

jquery判断对象是否显示或隐藏

if($('a.specail2').is(":visible")){ /**jquery判断对象是否显示或隐藏**/ $('a.one').hide(); $('a.specail2').show(); }else{ $('a.one').show(); $('a.specail2').hide(); }

PHP从数组中删除元素的四种方法实例

本篇文章主要介绍了PHP从数组中删除元素的四种方法实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 茴香豆的"茴"字有四种写法,PHP从数组中删除元素也有四种方法 ^_^. 删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: <?php $array = array(0 => "a", 1 => "b", 2 => "c"); unset($array[