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采用数组实现tab菜单切换效果
Dec 12 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
KnockoutJs快速入门教程
May 16 Javascript
原生js实现轮播图
Feb 27 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 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 htmlspecialchars加强版
2010/02/16 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
子页向父页传值示例
2013/11/27 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
python 实现归并排序算法
2012/06/05 Python
python字符串与url编码的转换实例
2018/05/10 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
个人简历自我评价范文
2014/02/04 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
团队精神的演讲稿
2014/05/14 职场文书
入股合作协议书
2014/10/12 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
个人年度总结报告
2015/03/09 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
OpenCV 图像梯度的实现方法
2021/07/25 Python
nginx内存池源码解析
2021/11/20 Servers