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中delegate()方法用法实例
Jan 19 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
详解React native fetch遇到的坑
2018/08/30 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python文本数据相似度的度量
2018/03/12 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
postman和python mock测试过程图解
2020/02/22 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
自我评价优秀范文分享
2013/11/30 职场文书
廉政教育心得体会
2014/01/01 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
骨干教师申报材料
2014/12/17 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript