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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
js Event对象的5种坐标
Sep 12 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
Angular6项目打包优化的实现方法
Dec 15 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中读写文件实现代码
2011/10/20 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python引用DLL文件的方法
2015/05/11 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
浅谈python迭代器
2017/11/08 Python
python如何实现异步调用函数执行
2019/07/08 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
Linux的文件类型
2012/03/07 面试题
大学生咖啡店创业计划书
2014/01/21 职场文书
篮球比赛策划方案
2014/06/05 职场文书
经济管理自荐书
2014/06/09 职场文书
交通事故协议书范本
2014/11/18 职场文书
个人先进材料范文
2014/12/30 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
python 自动化偷懒的四个实用操作
2021/04/11 Python
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
灵能百分百第三季什么时候来?
2022/03/15 日漫