第一百二十八章 滑动和显隐

上一章所讲的元素显示和隐藏的效果,大家都仔细观察过了吗?

可以认为这是两个效果的叠加,一个是以元素的左上角为基准进行缩放,另一个是元素透明度的变化。

左上角没有什么大问题,毕竟在文档流中,许多的东西就是相对于左上角而言,或者说是从左上向右下发展。但是在设计中讲道理没意思,高级的设计是理性的,但设计的最终效果都是感性的。因为大部分用户都不会理性的去思考你的设计,只是感性的去说这个东西好或者不好,舒服或者不舒服。

用户并不知道什么左上角,他觉得页面是上下滚动的,垂直方向的发展是可以接受的,加上左右多少有些莫名其妙。好吧,这个事情确实要分情况讨论,但是现在,如果我们只是想让这个元素上下发展呢?

这就是我们这一章所讲的滑动效果,这么直接翻译,其实并不是很好理解,我换一个很俗的说法吧,就是卷帘门效果。

为什么说这么多呢?因为这个方法太简单了呀,我不叨叨一通,这一章的篇幅实在太短了。

$('#a').slideUp();$('#a').slideDown();$('#a').slideToggle();

向下滑就是显示出来,或者说将这个元素展开。向上滑就是隐藏,或者说将这个元素收起。最后一个是切换,我不说你也明白的,就是在上述两种状态之间变化。

参数呢?也和上一章一样。就是它可以有很多很复杂的参数,但是我们先学会用数字去控制它动画的时长就可以了。


然后发现这个卷帘门的效果实在是太简单了(在有前面基础的前提下)。所以我们再讲一种效果——褪色(fade)。

对英文单词直译什么的,是最容易给新人设置障碍的方法了。当你学过之后,会觉得确实是这么回事儿,但是在你学会之前,总会觉得这个翻译莫名其妙。好吧,这上面的翻译也是我用翻译工具随便翻译的。不管翻译的问题,直接解释一下,就是通过改变元素的透明度,这样一下子就明白了。

$('#a').fadeIn();$('#a').fadeOut();$('#a').fadeToggle();

In 就是进来,就是显示出来。Out 是出去,就是隐藏起来。没什么不好理解的,就算是记不住,在使用的时候写一下,试一下它的实际效果,然后再用就可以了。

关于参数,依旧和上面一样。

讲到这里,你肯定在想,关于动画效果部分,这个套路我已经掌握了,一个显示,一个隐藏,一个切换,小括号里面可以写过渡的时间。

我怎么可能让你那么轻易抓到我的套路呢?于是对于改变透明度这个事情,还有一个方法:

$('#a').fadeTo(400, 0.6);

To 表示到什么程度。就是说,用这个方法可以让指定的元素将透明度改变到某一个值。这个方法,需要至少两个参数,第一个参数,指定过渡动画的时长,和前面的方法都不一样,这个动画时长必须指定。第二个参数,是要变化到的透明度,取值范围0~1,包含 0 和 1。

方法很强,只用这一个方法,就可以实现上面三个方法所做的事情。还能够做到他们做不到的事情。

还是那句话,根据实际情况,实际需求选择合适的方法。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百二十八章 滑动和显隐

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏