上一章所讲的元素显示和隐藏的效果，大家都仔细观察过了吗？
可以认为这是两个效果的叠加，一个是以元素的左上角为基准进行缩放，另一个是元素透明度的变化。
左上角没有什么大问题，毕竟在文档流中，许多的东西就是相对于左上角而言，或者说是从左上向右下发展。但是在设计中讲道理没意思，高级的设计是理性的，但设计的最终效果都是感性的。因为大部分用户都不会理性的去思考你的设计，只是感性的去说这个东西好或者不好，舒服或者不舒服。
用户并不知道什么左上角，他觉得页面是上下滚动的，垂直方向的发展是可以接受的，加上左右多少有些莫名其妙。好吧，这个事情确实要分情况讨论，但是现在，如果我们只是想让这个元素上下发展呢？
这就是我们这一章所讲的滑动效果，这么直接翻译，其实并不是很好理解，我换一个很俗的说法吧，就是卷帘门效果。
为什么说这么多呢？因为这个方法太简单了呀，我不叨叨一通，这一章的篇幅实在太短了。
$('#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。
方法很强，只用这一个方法，就可以实现上面三个方法所做的事情。还能够做到他们做不到的事情。
还是那句话，根据实际情况，实际需求选择合适的方法。
暂无评论内容