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 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Node.js使用Angular简单示例
May 11 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
js实现自定义右键菜单
May 18 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版(1)
2006/10/09 PHP
浅谈php扩展imagick
2014/06/02 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
实例讲解JavaScript预编译流程
2019/01/24 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
大学生实习推荐信
2015/03/27 职场文书
士兵突击观后感
2015/06/16 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
Golang 结构体数据集合
2022/04/22 Golang