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实现手机发送验证码的倒计时代码
Feb 12 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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文件中是否含有bom的函数
2012/05/31 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
jQuery对val和atrr("value")赋值的区别介绍
2014/09/26 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
vue的keep-alive用法技巧
2019/08/15 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
axios封装与传参示例详解
2020/10/18 Javascript
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python输出指定字符串的方法
2020/02/06 Python
python怎么对数字进行过滤
2020/07/05 Python
Python字符串三种格式化输出
2020/09/17 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
公司年会主持词
2014/03/22 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python