想想我们已经学过的各种方法，要做到显示和隐藏一个元素应该不难，只要去操作这个元素的 CSS 属性就可以了。具体一点，修改 display 属性的值，从默认值修改到 none 就能隐藏元素。
这样效果是达到了，但是过程很粗暴，在两个状态之间非常生硬的切换。你说对了，我们希望在显示和隐藏之间增加一些过渡效果。所以今天介绍的显示和隐藏方法，就是带有过渡效果的显示和隐藏。
首先我们当然是要有一个元素，这个元素的初始状态，可以是显示的，也可以是隐藏的。如果是显示的状态，当然就是默认情况就可以了，如果需要在初始状态下隐藏这个元素，就在它的 CSS 属性中增加 display: none; 就好了.
<style>#a {width: 100px;height: 100px;background: red;}#b {display: none;width: 100px;height: 100px;background: blue;}</style>……<div id="a"></div><div id="b"></div>就像上面这个样子。显示和隐藏的方法也非常简单，就是它们对应的英文单词。
$('#a').hide();$('#b').show();仔细观察的话，你可以看到他们的过渡效果，但可能觉得不是很明显，怎么才能够更明显的观察到这个效果呢？这两个方法都是可以给出更多的参数的，用来控制动画的效果，以及其他的一些功能。我们目前不把问题搞得很复杂，只讲一个最基础的参数。
在小括号中我们可以给出一个数值，用来控制过渡动画的时长。只是数值就好，不需要给出单位。但是我们要知道这个数值所使用的单位是毫秒（ms），而 1000 毫秒等于 1 秒。
现在我们想更明显的看到其中的过渡过程，可以给出一个稍微大一些的数值，以便观察。比如：3000。
$('#a').hide(3000);$('#b').show(3000);默认的动画时长是 400 毫秒。我很喜欢使用数值去控制过渡的时长，不过这里也可以使用一些关键字去描述：
$('#a').hide('slow');$('#a').hide('fast');觉得不够精确，还要查看文档才能想起来他们代表的时间究竟是多少，而且书写起来也并没有更方便，就不爱用。
其他还有一些参数，比如控制使用哪种效果的动画，甚至自定义具体的动画效果。还有当动画完成以后再去执行哪些操作。不过我们不说了，因为现在一起说内容会很多，就不容易记住。作为初学者，我们先知道都有哪些东西，在使用的时候，再去查阅文档，看它的具体功能。
听懂啦？想要深入学习，先在已经掌握我所讲的内容的基础上，再去自行查阅文档。
然后再讲一个切换，又是我不关注它当前的状态是什么，反正如果现在是显示的，就把它隐藏起来；如果现在是隐藏的，就把它显示出来。这是对它显示和隐藏状态的一个切换。
所以这个方法很简单粗暴的就叫做切换（toggle）。用法和上面两个一样，它的参数其实要更复杂，但是在初期，我们也像上面一样去使用就可以了。
演示我就不做了，也没有几句代码，大家自己动手尝试一下用不了两三分钟，不会耽误看动感超人的。
补充说明一下，这个方法并不仅仅是增加了过渡的效果，如果你仔细观察，会发现它还智能的适配了块元素和行内元素，在显示的时候给出对应的属性。
暂无评论内容