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 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 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
编译问题
2006/10/09 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Python文件操作基础流程解析
2020/03/19 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
初中地理教学反思
2014/01/11 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
Python实现视频中添加音频工具详解
2021/12/06 Python
Python字符串的转义字符
2022/04/07 Python