第一百二十九章 动画

前面我们学了几种特效,确切的说,除了最后一种方法,前面的都是对于元素隐藏和显示的过渡效果。

虽然我们轻松的实现了一些特效,但是这不够厉害啊,我想要变得更强!(在不变秃的前提下。

这个也很简单的,简单到只要知道一个方法就可以了。不过我们还是先说说它的参数吧:

动画的本质是什么?就是元素的一个或者多个 CSS 属性,从当前状态,渐变到另外的状态。

当前的状态是已有值,我们不需要重复的去说明,只需要告诉程序我们的目标状态是怎样的。而渐变的话是需要一个时间的,我们再告诉程序,我们打算花费多长时间去完成这个渐变。程序就可以完成这个动画效果了。

再本质一点,就是在这一段时间之内,我们不断的去为这个元素重新设置 CSS,每次将相应的值改变一点点,直到最后,变化到我们想要的结果。

说到设置元素的 CSS,我们前面好像学习了相应的方法,回想一下当时是怎么操作的。

那么动画的效果,就是在设置 CSS 的方法的基础上,增加一个变化的时间。

然后我们来看一下动画方法的写法:

$( "#a" ).animate({opacity: 0.3,width: "50px",height: "100px"}, 5000);

如果没有最后的动画时长,5000 毫秒,是不是在格式上和我们设置 CSS 是一样的?

需要注意的是,哪怕只是改变一个属性,也要使用对象的格式。

在上面的代码中,对象中的多个属性会同时发生变化。如果希望它们依次发生变化,可以使用 jQuery 的串联方式:

$( "#a" ).animate({ opacity: 0.3 }, 5000).animate({ width: "50px" }, 5000).animate({ height: "100px" }, 5000);

注意上面这是一个语句,换行并不是必须的,不过大家可以从上面学习一下,如果 jQuery 语句过长,可以在怎样的地方进行换行。

参数还有很多,动画相关的方法也有很多,能够实现的效果也有很多。不过在初期,甚至说在日常,有这些方法就足够我们使用了。

有一个点,需要特别注意一下,上面所讲的动画方法,可以对大部分的 CSS 属性起作用。当然前提是它可以发生渐变。

那么颜色可以渐变么?可以!这必须是可以的,但是,你按照上面的方法去写,并不能够发生变化。因为 jQuery 里面没有包含颜色渐变的相关功能。

如果网页效果中,缺少了颜色的渐变,那会是多么的无趣啊。不用感到失望,只要你为网页加上 jQuery 的色彩插件,就可以对颜色进行渐变的动画效果了。

下载地址:jQuery Color

一般的我们下载用于生产环境的压缩后的版本(Compressed)就可以了,在引入 jQuery 之后引入它。

它可以实现的功能非常的多,并不单单是让动画对颜色进行变化。大家可以在上述网址中查看它的文档进行学习。

好了,以前我们觉得特别高大上的各种特效,被我这么三言两语都讲完了,觉得一种莫名的失落感。其实我只是最简单直接的告诉了大家,最容易理解,并且可以马上实现效果的方法。

如果你希望更深入的去控制动画的效果,实现更细腻的变化,完成更复杂的任务,那么值得学习的东西还是相当多的。包括前面所讲的每一种方法,都有很多有趣的参数可以设置。先学会并熟练当前已知的内容,然后再自行阅读文档去扩充知识面,这些都是自己要在背后取下的功夫。

好了,不像一个老学究一样在这里说教了。小老鼠去休息了,大家自己努力做练习吧。

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

0

评论0

请先

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