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实现文字闪烁特效的方法
Dec 17 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
原生js实现3D轮播图
Mar 21 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php中定义网站根目录的常用方法
2010/08/08 PHP
如何用php获取文件名后缀
2013/06/09 PHP
php中JSON的使用方法
2015/04/30 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
交通工程专业推荐信
2014/09/06 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书