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 题型问答有答案参考
Feb 17 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JS前端笔试题分析
Dec 19 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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采集腾讯微博的实现代码
2012/01/19 PHP
php动态变量定义及使用
2015/06/10 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python 系统调用的实例详解
2017/07/11 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python中捕获键盘的方式详解
2019/03/28 Python
通过python检测字符串的字母
2020/02/18 Python
Django用户身份验证完成示例代码
2020/04/03 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
浅析Python requests 模块
2020/10/09 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
为什么需要版本控制?
2013/08/08 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
手机促销活动方案
2014/02/05 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
大学新闻系求职信
2014/06/03 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
小学运动会报道稿
2014/10/04 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python