jQuery效果

开发工具与关键技术：VS    jQuery
作者：宋永烨
撰写时间：2019-5-31

jQuery是一个JavaScript库 ,它的存在极大的简化了JavaScript编程,本文会通过使用jQuery
实现JavaScript的效果
效果一: 显示与隐藏
jQuery提供了两个用于快捷实现标签进行显示与隐藏效果的方法
show 与 hide : 一个是显示 一个是隐藏, 通过js也可以实现,但jQuery代码更短,使用会更加便捷

由于显示效果的代码与隐藏效果的代码高度相似,故只截取显示效果的代码
操作步骤:
1.通过jQuery提供的方法选中需要修改的元素,使用js选中的元素需要用jQuery转化为jQuery的对象才可以使用jQuery提供的方法
2.如果没有其他的要求,那这就够了,可以实现元素的隐藏与显示
3.通过配置show方法的参数,speed参数可以规定隐藏与显示的速度,可选值: ‘slow’,‘fast’,毫秒; callback参数设置隐藏与显示完成后执行的函数
4.拓展 可能是show与hide方法还不够简洁,所以jQuery还提供了一个toggle方法,该方法的参数与显示隐藏的参数相同,但它同时具有显示与隐藏的效果,类似于一个开关,当被选中的标签显示时隐藏,被隐藏时显示
效果二: 淡入淡出
与上文的显隐效果类似,该方法同样可以单独修改淡出或淡入,也有一个类似于开关的方法同时支持两个效果,唯一的不同就是,该效果还有一个可以修改渐变的不透明度(值为0到1)

fadeToggle:同时涵盖了淡出与淡入的效果,会根据选中的元素本身的状态进行判断
可用参数与显隐相同,规定了效果完成的时长与完成后执行的方法
fadeTo:给定渐变的不透明度
可控制渐变完成后选中元素的不透明度,范围在0-1之间

效果三: 滑动
滑动效果与上述两个效果相似,同样是可以调用当个效果或两个效果同时使用,配置的参数同样为控制效果时长与完成后的方法调用,使用方法与上文的使用方法相同. ,由于上述已有例子看,此处就不再赘述
效果四:动画
上述的几种动画效果如果依然无法实现你想要的效果,那可以使用jQuery封装的动画方法来自定义动画!
jQuery的动画效果的函数animate():参数值:
必需,定义形成动画的css 可选,动画完成后的执行函数.动画的效果时长,可选值为‘slow’, ‘fast’与毫秒;
本注释出自W3School: 默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

animate()方法生成动画可以同时使用多个属性,此方法几乎可以操作所有CSS属性,但请注意,当你使用animate()方法,生成动画的属性名,例如padding-left等这种出现中划线的属性时,书写的格式请更改为paddingLeft这中格式,同时,色彩动画不在核心jQuery库中,如果需要使用,请先下载Color Animation插件
相对值:在此方法中可以使用相对值,+=或-=

譬如上图的格式,此值会在被选中的元素的基础上进行操作
预定义值:您甚至可以将驶行的动画值设置为show hide 或 toggle等
如上图的将元素的高度的属性值设置为显隐,则该元素在高度大于零会逐渐减少至零,反之亦然
总结:
jQuery使用方便,功能强大,入门简单,实乃网页制作的一大利器
本文主要介绍了jQuery封装的动画效果,其他下过会一一介绍
注: 默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
本文参考W3School