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 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
js保留两位小数方法总结
Jan 31 Javascript
angularJS开发注意事项
May 26 Javascript
JavaScript门道之标准库
May 26 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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开启安全模式后禁用的函数集合
2011/06/26 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
Angular的$http与$location
2016/12/26 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
pyqt5中动画的使用详解
2020/04/01 Python
详解Python中的路径问题
2020/09/02 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
为什么要有struct关键字
2012/05/08 面试题
五水共治捐款倡议书
2014/05/14 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
MySQL之DML语言
2021/04/05 MySQL
P站美图推荐——变身女主角特辑
2022/03/20 日漫