jQuery 动态酷效果实现总结


Posted in Javascript onDecember 27, 2009

jQuery在制作动态酷效果的时候有很强的优势,以下是笔者总结的一些最常用到的方法。

1.修改内联CSS
jQyery提供.css()方法来供我们获取或修改内联的css
.css()方法能够接收的参数由两种,一种是为它单独传递一个单独的样式属性和值,另一种是为它传递一个由“属性-值”对构成的映射:
.css('property','value');
.css({'property1':'value1','property-2':'value2'});
一般来说,数字值不需要加引号,而字符串值需要加引号。但是,当使用映射表示法时,如果属性名使用驼峰大小写形式的DOM表示法,则可以省略引号。

2.基本的隐藏和显示,不带动画效果
.hide()
.show()
这两个方法的作用就是立即隐藏或显示匹配的元素集合。
3.指定显示速度的隐藏和显示
在.hide()和.show()方法的基础上,可以制定隐藏或显示的速度。它的表示方法为:.hide('speed')或.show('speed')。speed的值可以为:
slow、normal、fast;slow为0.6秒;normal为0.4秒;fast为0.2秒
数值表示的毫秒数值

4.淡入淡出效果

.fadein() 为匹配元素指定淡入效果
.fadeout() 为匹配元素指定淡出效果
使用.fadein()或.fadeout()同样可以制定speed值,如:slow、normal、fast、毫秒数
淡入淡出的实现方式其实是增加或减少匹配元素的不透明度来实现的。
5.制作动画效果
jQuery提供了一个强大的.animate()方法,通过该方法可以创建包含多重效果的自定义动画。.animate()方法接受以下四个参数:
一个包含样式属性及值的映射。
可选的速度参数,默认为normal。
可选的缓动类型
可选的回调参数。
6.使用.animate()制作动画的时候应当考虑的问题
css对我们要改变的元素所施加的限制
例如,在元素的css定位没有设置成relative或absolute的情况下,调整left属性对于匹配的元素毫无作用。所有块级元素默认的css定位属性都是static,这个值精切地表明:在改变元素的定位属性之前试图移动它们,它们只会保持静止不动。
并发与排队效果
jQuery中无论是处理一组还是多组元素,默认都是同时发生的,因此,并发问题就成为了我们值得考虑的一个问题。概括起来有以下两点:
如果是处理一组元素,可以根据代码的书序进行控制;
如果是处理多组元素,则可以通过回调函数进行控制;

Javascript 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
javascript生成大小写字母
Jul 03 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jquery实现拖动效果
Aug 10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
javascript 清空form表单中某种元素的值
Dec 26 #Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 #Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 #Javascript
jQuery 常见开发使用技巧总结
Dec 26 #Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 #Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 #Javascript
js tab效果的实现代码
Dec 26 #Javascript
You might like
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python爬虫的工作原理
2017/03/05 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python在文本开头插入一行的实例
2018/05/02 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
办公室文秘自我评价
2013/09/21 职场文书
家长会演讲稿
2014/04/26 职场文书
求职信标题怎么写
2014/05/26 职场文书
经理岗位职责
2015/02/02 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
话题作文之诚信
2019/11/28 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers