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 相关文章推荐
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
script标签属性用type还是language
Jan 21 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
Javascript的this用法
2017/01/16 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python回调函数的使用方法
2014/01/23 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python实现微信小程序支付功能
2019/07/25 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
打架检讨书800字
2014/01/10 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
小学教师求职信范文
2015/03/20 职场文书
刘胡兰观后感
2015/06/16 职场文书