第一百二十七章 显示和隐藏

想想我们已经学过的各种方法,要做到显示和隐藏一个元素应该不难,只要去操作这个元素的 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)。用法和上面两个一样,它的参数其实要更复杂,但是在初期,我们也像上面一样去使用就可以了。

演示我就不做了,也没有几句代码,大家自己动手尝试一下用不了两三分钟,不会耽误看动感超人的。

补充说明一下,这个方法并不仅仅是增加了过渡的效果,如果你仔细观察,会发现它还智能的适配了块元素和行内元素,在显示的时候给出对应的属性。

原文链接:https://www.ek58.com/archives/3779,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?